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>
好了，代码到此结束，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了BootStrap TreeView使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了js检测离开或刷新页面时表单数据是否更改的方法,涉及javascript表单操作及事件响应的相关技巧,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了js倒计时简单实现方法，方便一些提示重要日期的来临，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要为大家详细介绍了js+canvas实现可自动吸附闭合的鼠标绘制多边形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了微信小程序实现日期格式化和倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
这篇文章主要介绍了JavaScript实现同时调用多个函数的方法,以一个简单实例分析了JavaScript同时调用两个函数的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了iframe高度自适应及隐藏滚动条的实例详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-09-09
这篇文章主要为大家详细介绍了微信小程序实现分享商品海报功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了JavaScript的执行机制，对此感兴趣的同学，可以参考下2021-04-04
微信页面开发时，各个主页之间的跳转，完全是通过a链接进行的，但是来回跳转几次，再次从其他主页面跳回首页的时候，微信头部出现了跳转加载进度条，但是就是不跳转，也没有任何反应，怎么回事呢？下面小编给大家解答下2016-08-08
最新评论