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 相关文章推荐
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
基于JavaScript获取base64图片大小
Oct 18 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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
PHP SPL使用方法和他的威力
2013/11/12 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
js实现tab切换效果
2017/02/16 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
小小聊天室Python代码实现
2016/08/17 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
python实现雨滴下落到地面效果
2018/06/21 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
python__name__原理及用法详解
2019/11/02 Python
档案保密承诺书
2014/06/03 职场文书
法人身份证明书
2014/10/08 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python