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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
Antd中单个DatePicker限定时间输入范围操作
Oct 29 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 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
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
财务管理个人自荐书范文
2013/11/24 职场文书
七年级数学教学反思
2014/01/22 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
意向协议书
2015/01/27 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
学校运动会加油词
2015/07/18 职场文书
客户答谢会致辞
2015/07/30 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
SSM VUE Axios详解
2021/10/05 Vue.js
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js