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 相关文章推荐
跨域表单提交状态的变相判断代码
Nov 12 Javascript
javascript iframe编程相关代码
Dec 28 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
深入理解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之第七天
2006/10/09 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
python实现按行切分文本文件的方法
2016/04/18 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Linux下多个Python版本安装教程
2018/08/15 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Python中format()格式输出全解
2019/04/12 Python
手写一个python迭代器过程详解
2019/08/27 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
企业总经理岗位职责
2014/02/13 职场文书
百年校庆节目主持词
2014/03/27 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
Java Spring读取和存储详细操作
2022/08/05 Java/Android