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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 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
人族 TERRAN 概述
2020/03/14 星际争霸
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
php多文件上传下载示例分享
2014/02/20 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
基于jquery的动态创建表格的插件
2011/04/05 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
纯JS实现简单的日历
2017/06/26 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
Python Queue模块详解
2014/11/30 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
python:print格式化输出到文件的实例
2018/05/14 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
环保专项行动方案
2014/05/12 职场文书
高中运动会广播稿
2014/09/16 职场文书
授权委托书样本
2014/09/25 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
小学校长开学致辞
2015/07/29 职场文书
珍爱生命主题班会
2015/08/13 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书