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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
PDO实现学生管理系统
2020/03/21 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
python集合类型用法分析
2015/04/08 Python
Python生成密码库功能示例
2017/05/23 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
kali中python版本的切换方法
2019/07/11 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
电脑专业个人求职信范文
2014/02/04 职场文书
企业军训感言
2014/02/08 职场文书
文明餐桌活动方案
2014/02/11 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
运动会开幕词
2015/01/28 职场文书
慈善募捐倡议书
2015/04/27 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python
Python Pandas 删除列操作
2022/03/16 Python