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 相关文章推荐
jquery插件jbox使用iframe关闭问题
Feb 09 Javascript
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
vue cli升级webapck4总结
Apr 04 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
微信小程序实现文件预览
Oct 22 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
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
调试php程序的简单步骤
2019/10/04 PHP
PHP 8新特性简介
2020/08/18 PHP
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
JavaScript Array对象基本方法详解
2019/09/03 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
struct与class的区别
2014/02/03 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
银行实习鉴定
2013/12/13 职场文书
优秀民警事迹材料
2014/01/29 职场文书
法人身份证明书
2014/10/08 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
二审答辩状格式
2015/05/22 职场文书
举起手来观后感
2015/06/09 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python