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 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
12306验证码破解思路分享
Mar 25 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
Sea.JS知识总结
May 05 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
JS实现简易贪吃蛇游戏
Aug 24 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php 执行系统命令的方法
2009/07/07 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
python进行TCP端口扫描的实现
2018/12/21 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
项目建议书模板
2014/05/12 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
电影雷锋观后感
2015/06/10 职场文书
春风化雨观后感
2015/06/11 职场文书
水浒传读书笔记
2015/06/25 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript