JavaScript使圖片旋轉一周

使圖片進行360度旋轉一周。能夠相容所有瀏覽器。IE使:matirx濾鏡 webkit: webkitTransform Opera: OTransform firefox:MozTransform。

很眩的一個JavaScript效果，參考它的編程技巧吧。

效果示範

 

Code

<div id="container" style="width:520px;height:280px;position:relative;margin:0 auto"><div id="demo" align="center"><img src="../images/1.jpg" width="520" height="280" /></div></div><script>var Img = function() {var T$ = function(id) { return document.getElementById(id); }var ua = navigator.userAgent,isIE = /msie/i.test(ua) && !window.opera;var i = 0, sinDeg = 0, cosDeg = 0, timer = null ;var rotate = function(target, degree) {target = T$(target);var orginW = target.clientWidth, orginH = target.clientHeight;clearInterval(timer);function run(angle) {if (isIE) { // IEcosDeg = Math.cos(angle * Math.PI / 180);sinDeg = Math.sin(angle * Math.PI / 180);with(target.filters.item(0)) {M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); }target.style.top = (orginH - target.offsetHeight) / 2 + 'px';target.style.left = (orginW - target.offsetWidth) / 2 + 'px';} else if (target.style.MozTransform !== undefined) {  // Mozillatarget.style.MozTransform = 'rotate(' + angle + 'deg)';} else if (target.style.OTransform !== undefined) {   // Operatarget.style.OTransform = 'rotate(' + angle + 'deg)';} else if (target.style.webkitTransform !== undefined) { // Chrome Safaritarget.style.webkitTransform = 'rotate(' + angle + 'deg)';} else {target.style.transform = "rotate(" + angle + "deg)";}}timer = setInterval(function() {i += 10;run(i);if (i > degree - 1) {i = 0;clearInterval(timer);} }, 10); }return {rotate: rotate}}();window.onload = function() {Img.rotate('demo', 360);document.getElementById('demo').onclick = function() {Img.rotate('demo', 360);}}</script>