<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box{ width: 100px; height: 30px; background: orange; } </style></head><body><div id='box'></div> <script type="text/javascript"> (function() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // Webkit中此取消方法的名字变了 window[vendors[x] + 'CancelRequestAnimationFrame']; }
if (!window.requestAnimationFrame) { window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16.7 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function(id) { clearTimeout(id); }; } }());
//以上requestAnimationFrame兼容处理
var oBox = document.getElementById('box'); var oBoxwidth = oBox.clientWidth; function move(obj,str,end){ var timer, nowWidth = str, overWidth = end; obj.speed = 0 cancelAnimationFrame(timer) timer = requestAnimationFrame(function fn(){ obj.speed += (overWidth-nowWidth)/6; //6为系数 obj.speed *=0.75; //0.75摩擦系数 nowWidth+=obj.speed obj.style.width = nowWidth+'px' if(Math.abs(overWidth-nowWidth)<=1 && obj.speed<=1){
obj.style.width = end+'px' // 校 正 cancelAnimationFrame(timer) }else{ requestAnimationFrame(fn) } }) } oBox.onmouseover = function(){ move(this,oBoxwidth,300) } oBox.onmouseout = function(){ move(this,300,oBoxwidth) } </script></body></html>
转载于:https://www.cnblogs.com/neol/p/8146846.html
相关资源：弹性参数计算公式汇总