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中的Screen屏幕对象
Jan 16 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
深入理解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字符串 ==比较运算符的副作用
2009/10/21 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
JS遍历对象属性的方法示例
2017/01/10 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
python控制台英汉汉英电子词典
2020/04/23 Python
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python实现提取文章摘要的方法
2015/04/21 Python
python的Tqdm模块的使用
2018/01/10 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
我爱我家教学反思
2014/05/01 职场文书
课内比教学心得体会
2014/09/09 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
交通事故和解协议书
2015/01/27 职场文书
军训后的感想
2015/08/07 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
Python中的socket网络模块介绍
2022/07/23 Python