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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
关于javascript中this关键字(翻译+自我理解)
Oct 20 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
js图片切换具体实现代码
Oct 13 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
Vue-Router模式和钩子的用法
Feb 28 Javascript
vue移动端路由切换实例分析
May 14 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 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
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
PHP中for循环语句的几种变型
2006/11/26 PHP
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
python字符串的常用操作方法小结
2016/05/21 Python
python实现批量监控网站
2016/09/09 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
幼儿园家长寄语
2014/04/02 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
退休欢送会致辞
2015/07/31 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python