JavaScript实现窗口抖动效果


Posted in Javascript onOctober 19, 2016

原理介绍

抖动其实是往复运动的一种特殊形式,只不过往复运动是一种无摩擦力的无限运动,且以速度为参照依据;而抖动以位置作为参照依据,最终停在起始点

在网页中最常见的一种抖动效果应该是窗口抖动提示了

JavaScript实现窗口抖动效果

抖动元素从起始点开始,先向右移动最大距离len,然后移动到对称的左边位置;然后再向右移动稍微小一点的距离,再移动到对称的左边位置;以此循环,最终元素停止在起始点

代码实现

抖动在代码实现上,无非就是通过定时器,每隔一段时间让left或top值进行变化

在运动实现中,有两种距离变化的思路

思路一

div.style.left = div.offsetLeft + value;

每次都获取元素的当前样式,再与变化的value值进行运算

思路二

left = div.offsetLeft;
......
div.style.left = left + value;

在定时器开启之前,获取元素的初始样式,再与变化的value值进行运算

从抖动实现上来说,使用第二种方法,把距离变化完全交给value值变化来实现较为简单

所以,代码实现的关键就是了解value是如何变化的

假设最远距离为目标target,同方向的距离间隔为步长step。如果用数字更直观的表示,value的值类似于4、-4、2、-2、0。所以还需要一个变量dir来控制起始抖动方向,定时器每运动一次都要对dir进行更改

//定时器开启前的变量声明
dir = 1;
step = 0;
left = div.offsetLeft
//定时器里面的代码
value = dir*(target - step);
if(step >= target){
step = target
}
div.style.left = left + value + 'px';
if(dir === -1){
step++; 
}
dir = -dir;

将抖动效果封装为shakeMove.js

function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
} 
function shakeMove(json){
//声明要进行抖动的元素
var obj = json.obj;
//声明元素抖动的最远距离
var target = json.target;
//默认值为20
target = Number(target) || 20;
//声明元素的变化样式
var attr = json.attr;
//默认为'left' 
attr = attr || 'left'; 
//声明元素的起始抖动方向
var dir = json.dir;
//默认为'1',表示开始先向右抖动
dir = Number(dir) || '1';
//声明元素每次抖动的变化幅度
var stepValue = json.stepValue;
stepValue = Number(stepValue) || 2;
//声明回调函数 
var fn = json.fn;
//声明步长step
var step = 0;
//保存样式初始值
var attrValue = parseFloat(getCSS(obj,attr));
//声明参照值value
var value;
//清除定时器
if(obj.timer){return;}
//开启定时器
obj.timer = setInterval(function(){
//抖动核心代码
value = dir*(target - step);
//当步长值大于等于最大距离值target时
if(step >= target){
step = target
}
//更新样式值
obj.style[attr] = attrValue + value + 'px';
//当元素到达起始点时,停止定时器
if(step == target){
clearInterval(obj.timer);
obj.timer = 0;
//设置回调函数
fn && fn.call(obj); 
} 
//如果此时为反向运动,则步长值变化
if(dir === -1){
step = step + stepValue; 
}
//改变方向
dir = -dir; 
},50); 
}

实例应用

下面利用封装的shakeMove来实现一些简单的抖动应用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test{
height: 50px;
width: 50px;
position: absolute;
top: 50px;
} 
</style>
</head>
<body>
<div id="box">
<div class="test" style="left:10px;background:lightblue"></div>
<div class="test" style="left:70px;background:lightgreen"></div>
<div class="test" style="left:130px;background:pink"></div>
<div class="test" style="left:190px;background:lightcoral"></div>
<div class="test" style="left:250px;background:orange"></div>
</div>
<script src="http://files.cnblogs.com/files/xiaohuochai/shakeMove.js"></script>
<script>
var aDiv = box.getElementsByTagName('div');
for(var i = 0; i < aDiv.length; i++){
aDiv[i].onmouseover = function(){
shakeMove({obj:this,attr:'top'});
}
}
</script>
</body>
</html>

以上所述是小编给大家介绍的JavaScript实现窗口抖动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 双色表格实现代码
Dec 08 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
js定时器实例分享
Dec 20 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
原生js图片轮播效果实现代码
Oct 19 #Javascript
Angular2表单自定义验证器的实现
Oct 19 #Javascript
javascript滚轮控制模拟滚动条
Oct 19 #Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 #Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 #Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 #Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 #Javascript
You might like
深入了解php4(1)--回到未来
2006/10/09 PHP
我的论坛源代码(七)
2006/10/09 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
jcrop基本参数一览
2013/07/16 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
python实现梯度下降算法
2020/03/24 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Python3列表List入门知识附实例
2020/02/09 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
数据库专业英语
2012/11/30 面试题
Unix如何在一行中运行多个命令
2015/05/29 面试题
关于赌博的检讨书
2014/01/08 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
校车安全管理责任书
2015/05/11 职场文书
大学生暑假实习总结
2015/07/13 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js