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 相关文章推荐
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 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实现过滤字符串中的中文和数字实例
2015/07/29 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
python绘制玫瑰的实现代码
2020/03/02 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
Linux的文件类型
2016/07/05 面试题
Python如何实现单例模式
2016/06/03 面试题
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
小学生安全教育主题班会
2015/08/12 职场文书