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 Object.extend
May 18 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
jquery each()源代码
Feb 14 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 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 screw加密php源代码
2013/06/20 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
prototype 学习笔记整理
2009/07/17 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
7个JS基础知识总结
2014/03/05 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
Python中input和raw_input的一点区别
2014/10/21 Python
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
python看某个模块的版本方法
2018/10/16 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
升职自荐信范文
2013/10/05 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
员工辞职信怎么写
2015/02/27 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书