兼容各个浏览器的动画循环代码。使用html5的requestanimationframe api
window.requestnextanimationframe =
(function () {
var originalwebkitrequestanimationframe = undefined,
wrapper = undefined,
callback = undefined,
geckoversion = 0,
useragent = navigator.useragent,
index = 0,
self = this;
// workaround for chrome 10 bug where chrome
// does not pass the time to the animation function
if (window.webkitrequestanimationframe) {
// define the wrapper
wrapper = function (time) {
if (time === undefined) {
time = +new date();
}
self.callback(time);
};
// make the switch
originalwebkitrequestanimationframe = window.webkitrequestanimationframe;
window.webkitrequestanimationframe = function (callback, element) {
self.callback = callback;
// browser calls the wrapper and wrapper calls the callback
originalwebkitrequestanimationframe(wrapper, element);
}
}
// workaround for gecko 2.0, which has a bug in
// mozrequestanimationframe() that restricts animations
// to 30-40 fps.
if (window.mozrequestanimationframe) {
// check the gecko version. gecko is used by browsers
// other than firefox. gecko 2.0 corresponds to
// firefox 4.0.
index = useragent.indexof('rv:');
if (useragent.indexof('gecko') != -1) {
geckoversion = useragent.substr(index + 3, 3);
if (geckoversion === '2.0') {
// forces the return statement to fall through
// to the settimeout() function.
window.mozrequestanimationframe = undefined;
}
}
}
return window.requestanimationframe ||
window.webkitrequestanimationframe ||
window.mozrequestanimationframe ||
window.orequestanimationframe ||
window.msrequestanimationframe ||
function (callback, element) {
var start,
finish;
window.settimeout( function () {
start = +new date();
callback(start);
finish = +new date();
self.timeout = 1000 / 60 - (finish - start);
}, self.timeout);
};
}
)
();
ad：真正免费，域名+虚机+企业邮箱=0元