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仿jquery animate动画效果，具有一定的，感兴趣的小伙伴们可以参考一下2016-07-07
本文主要介绍了js+css3实现旋转效果的方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了简单了解JavaScript中常见的反模式，反模式 是指对反复出现的设计问题的常见的无力而低效的设计模式，俗话说就是重蹈覆辙。 这篇文章描述了 JavaScript 中常见的一些反模式，以及避免它们的办法。,需要的朋友可以参考下2019-06-06
今天分析一下, 终于找到原因. 旧版本的js文件写的浏览器判断有异常, 所以导致插入点一直在头部. 今天修复之2014-05-05
这篇文章主要给大家介绍了关于ES6学习教程之Promise用法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了moment.js轻松实现获取当前日期是当年的第几周,需要的朋友可以参考下2015-02-02
javascript 获取url参数和script标签中获取url参数函数代码
不要在方法中调用方法，否则可能始终获取的是最后一个js的文件的参数，要在方法中使用，请先用变量保存，在方法中直接获取2010-01-01
在Javascript中，任何function在执行的时候都会创建一个执行上下文，因为为function声明的变量和function有可能只在该function内部，这个上下文，在调用function的时候，提供了一种简单的方式来创建自由变量或私有子function。2015-10-10
今天小编就为大家分享一篇layui点击导航栏刷新tab页的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
使用javascript来写复制到剪贴板的代码，一般都是浏览器不兼容的。所以采用flash的方式，模拟一个层，再来复制，就可以做到全部浏览器都适用，具体实现如下，感兴趣的朋友可以参考下哈2013-05-05
最新评论