如何通过JS实现简单抖动效果

最新推荐文章于 2024-01-23 11:30:00 发布

Joker_Ye

最新推荐文章于 2024-01-23 11:30:00 发布

阅读量3.5k

点赞数 1

文章标签： javascript 抖动位置偏移元素设置

本文链接：https://blog.csdn.net/hj7jay/article/details/72828644

版权

代码如下：

<!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>

Joker_Ye

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何通过JS实现简单抖动效果

代码如下：Title#div1 {width: 100px;height: 100px;position: absolute;left: 400px;top: 200px;background: red;}var div1 = document.querySelector('#div1');document.onclick = function
复制链接

扫一扫