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编程起步(第二课)
Jan 10 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
浅析从vue源码看观察者模式
Jan 29 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
javascript前端实现多视频上传
Dec 13 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 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
PHP4实际应用经验篇(7)
2006/10/09 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
python中正则表达式的使用详解
2014/10/17 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
python中正则表达式与模式匹配
2019/05/07 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
python 如何在测试中使用 Mock
2021/03/01 Python
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
Java程序员面试题
2016/09/27 面试题
简历的个人自我评价范文
2014/01/03 职场文书
优秀党员主要事迹
2014/01/19 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
教师师德工作总结2015
2015/07/22 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书