<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ImageRotation
#demo { cursor:pointer; position:absolute;filter:progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");}
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) { // IE cosDeg = 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) { // Mozilla target.style.MozTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.OTransform !== undefined) { // Opera target.style.OTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.webkitTransform !== undefined) { // Chrome Safari target.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); } }
这是在网上找的一段代码，完全不明白，谁能讲解一下它的原理，以及上面的代码，谢谢了
[quote]return {rotate: rotate} //返回对像{rotate:rotate}
这个返回干什么的？
[/quote]
这样就可以
Img.rotate('demo', 360);
Img = function(){
return { rotate:function(){}}
}();
就是相当于
var Img = {
rotate : function(){}
};
你贴的代码那样写是为了防止内部函数（或变量）被外面使用，实现闭包的效果
setInterval(function(){},interval)
先说这个，这个是定时执行
这里定时执行run这个方法，参数的意思是转动的角度
cosDeg = Math.cos(angle * Math.PI / 180);
sinDeg = Math.sin(angle * Math.PI / 180);
with(target.filters.item(0)) {
M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
}
这里M11、M12、M21、M22分别为长方形图片的4个点
然后定时器，定时取旋转
模拟圆形旋转
sin为数学的正弦函数
cos为数学的余弦函数
[code="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ImageRotation
#demo { cursor:pointer; position:absolute;filter:progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");}
var Img = function() { var T$ = function(id) { return document.getElementById(id); } //接下来的代码只要T$("demo")，就相当于document.getElementById（"demo") var ua = navigator.userAgent, isIE = /msie/i.test(ua) && !window.opera; //判断是否IE 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) { // IE 浏览器进行的旋转，IE不提供transform，所以得自己计算位置 cosDeg = 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) { // Mozilla firefox这类浏览器进行的旋转 target.style.MozTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.OTransform !== undefined) { // Opera Opera这类浏览器进行的旋转 target.style.OTransform = 'rotate(' + angle + 'deg)'; } else if (target.style.webkitTransform !== undefined) { // Chrome Safari 这类浏览器进行的旋转 target.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); //每隔10MS执行一次旋转，角度的变化每执行一次添加10度，当i>degree-1时停止旋转 } return {rotate: rotate} //返回对像{rotate:rotate} }(); //定义Img函数，并立即执行该函数，执行结果后就是返回对像{rotate:rotate} window.onload = function() { Img.rotate('demo', 360); //代码载入完后就执行旋转 document.getElementById('demo').onclick = function() { //点击图片 后就进行旋转 Img.rotate('demo', 360); } }
[/code]
