JS实现简单抖动效果
更新时间：2017年06月01日 08:42:16 作者：catEatBird
这篇文章给大家结束了通过js实现抖动效果，非常不错，具有参考借鉴价值，感兴趣的朋友参考下吧
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
width: 100px;
height: 100px;
position: absolute;
left: 400px;
top: 200px;
background: red;
}
</style>
</head>
<body>
<div id="div1"></div>
<script>
var div1 = document.querySelector('#div1');
document.onclick = function () {
/*
* 抖动：
* 1. 每次改变一下元素的位置
* 按照一个中心点进行偏移，假设中心点left原始是400，那么每次就以left：400为中心做位置的移动
* 380 -> 420
* */
// div1.style.left = '380px';
// div1.style.left = '420px';
var a = true;
setInterval(function() {
/*
* 根据a的值，做不同的设置
* */
div1.style.left = (a ? 380 : 420) + 'px';
a = !a;
}, 30);
}
</script>
</body>
</html>
好了，代码到此结束，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对脚本之家网站的支持！
相关文章
下面小编就为大家带来一篇关于js动态引入四种方式的实例代码，具有很好的参考价值，分享给大家一起跟随小编过来看看吧2018-05-05
js模拟jquery的slide和fadeIn和fadeOut功能
以前用过jquery的slideUp，slideDown，等许多很不错的方法，感觉很容易就能实现页面元素的动画效果！2010-07-07
这篇文章主要介绍了JavaScript如何获取图片的原始尺寸以宽度为例,需要的朋友可以参考下2014-05-05
Javascript也是面向对象的语言，但它是一种基于原型Prototype的语言，而不是基于类的语言。接下来通过本文给大家介绍Javascript中的Prototype到底是啥的相关知识，感兴趣的朋友参考下2016-02-02
响应式网站设计(Responsive Web design)是一种网络页面设计布局,是目前比较流行的一种网页设计,下面这篇文章主要给大家介绍了关于three.js响应式设计的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要为大家详细介绍了JS+cookie实现购物评价五星好评功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
JavaScript 函数柯里化是将一个多参数的函数转换为一系列单参数的函数,每个单参数函数都可以接收一个参数,并返回一个新的函数,本文将通过代码示例给大家讲讲JavaScript函数柯里化的优缺点,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了微信小程序用canvas实现电子签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了微信小程序收货地址API兼容低版本解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
这篇文章主要介绍了Base64(二进制)图片编码解析及在各种浏览器的兼容性处理,需要的朋友可以参考下2017-02-02
最新评论