您的位置：首页 > Web前端 > JavaScript

javascript点击之后使元素e左右震动

2016-06-08 00:00 495 查看

摘要: 点击之后使元素e左右震动，抖动的距离、抖动的时间、抖动之后调用的函数都已经封装好了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 200px;
height: 200px;
background: green;
}
</style>
<Script>
window.onload = function(){
//将e转化为相对定位的元素，使之左右“震动”
//第一个参数可以是元素对象或者是元素的id
//如果第二个参数是函数，以e为参数，它将在动画结束时候调用
//第三个参数指定e震动的距离，默认是5毫米
//第四个参数指定震动多久，默认是500毫秒
function shake(e,oncomplete,distance,time){
if(e==="string") e = document.getElementById(e);
if(!distance) distance = 5;
if(!time) time = 500;

var originalStyle = e.style.cssText;            //保存e的原始style
e.style.position = "relative";                  //使e相对定位
var start = (new Date()).getTime();             //动画的开始时间
animate();                                      //动画开始

//函数检查消耗的时间，更新e的位置
//动画完成将e还原成原始状态
//否则,更新e的位置，安排它自身重新运作
function animate(){
var now = (new Date()).getTime();           //得到当前时间
var elapsed = now - start;                  //从开始以来消耗了多长时间
var fraction = elapsed/time;                //是总时间的几分之几
if(fraction<1){
//作为动画完成比例的函数，计算e的x位置
//使用正玄函数将完成的比例乘以4PI
//所以它来回往复两次
var x = distance*Math.sin(fraction*4*Math.PI);
e.style.left = x +"px";

//在25毫秒后或者在总时间的最后再次尝试运行函数
//目的是为了产生每秒40帧的动画
setTimeout(animate,Math.min(25,time-elapsed));
}else{                  //否则动画完成
e.style.cssText = originalStyle;
if(oncomplete) oncomplete(e);           //调试完成后的回调函数

}
}
}
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
oBtn.onclick =  function(){
shake(div1)
}

} ;
</Script>
</head>
<body>
<input id="btn" type="button" value="抖动">
<div id="div1"></div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航