javascript 图片360旋转

<!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); } }

这是在网上找的一段代码,完全不明白,谁能讲解一下它的原理,以及上面的代码,谢谢了

3个回答

[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]

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问