JS实现简单抖动效果


Posted in Javascript onJune 01, 2017

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

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

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

Javascript 相关文章推荐
Javascript 解疑
Nov 11 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
vue实现跨域的方法分析
May 21 Javascript
深入理解vue中的$set
Jun 01 #Javascript
详解angular中的作用域及继承
May 31 #Javascript
Node学习记录之cluster模块
May 31 #Javascript
Express框架之connect-flash详解
May 31 #Javascript
node.js中express-session配置项详解
May 31 #Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 #Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 #Javascript
You might like
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Python查找第n个子串的技巧分享
2018/06/27 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
Python使用Matlab命令过程解析
2020/06/04 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
美德好少年主要事迹
2014/01/29 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
2014年教务工作总结
2014/12/03 职场文书
会计试用期自我评价
2015/03/10 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python