好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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>

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

原文链接:http://www.cnblogs.com/catEatBird/archive/2017/05/31/6926453.html

查看更多关于JS实现简单抖动效果的详细内容...

  阅读:37次