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 相关文章推荐
js 复制或插入Html的实现方法小结
May 19 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
jquery编写日期选择器
Mar 16 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
JavaScript实现跟随鼠标移动的盒子
Jan 28 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 Memcache 中实现消息队列
2009/11/24 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
jsTree使用记录实例
2016/12/01 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
ansible作为python模块库使用的方法实例
2017/01/17 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
Python中base64与xml取值结合问题
2019/12/22 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
Python如何获取文件指定行的内容
2020/05/27 Python
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
Ajax请求总共有多少种Callback
2016/07/17 面试题
Python中pass语句的作用是什么
2016/06/01 面试题
英语自荐信范文
2013/12/11 职场文书
授权委托书协议书
2014/10/16 职场文书
财务出纳岗位职责
2015/03/31 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
Python合并多张图片成PDF
2021/06/09 Python