html震动效果,JS实现简单抖动效果

废话不多说了，直接给大家贴代码了，具体代码如下所示：

Title

#div1 {

width: 100px;

height: 100px;

position: absolute;

left: 400px;

top: 200px;

background: red;

}

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);

}

好了，代码到此结束，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对脚本之家网站的支持！

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网