使元素e左右震动
2016-05-30 16:35
399 查看
<!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 = origin 4000 alStyle; 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>
<!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>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- Web布局连载——两栏固定布局(五)
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- [div+css]晒晒最新制作专题推广页模板
- 最后一次说说闭包
- Ajax
- 盒子模型
- CSS选择器
- CSS样式优先权
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- [css] line-height 百分比单位和数值单位的区别
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)