JS实现简单抖动效果_js教程

JS实现简单抖动效果

2022-01-12 15:27catEatBird js教程

这篇文章给大家结束了通过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>