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 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
原生js实现随机点名
Jul 05 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
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
小程序实现留言板
2018/11/02 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
python实现用户管理系统
2018/01/10 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
详解python 中in 的 用法
2019/12/12 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
网吧消防安全制度
2014/01/28 职场文书
应届大专生自荐书
2014/06/16 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
世界红十字日活动总结
2015/02/10 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
公司回复函格式
2015/07/14 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
angular异步验证器防抖实例详解
2022/03/31 Javascript