如何实现标签顺时针旋转，逆时针旋转啊

一天要饭生活又开始啦 2012-12-11 04:02:14

如何实现标签顺时针旋转，逆时针旋转啊，jquery也行

...全文

803 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

hch126163 2012-12-12

打赏
举报

css3 IE6 用滤镜再加 setTimeout 就搞定 [code=html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .rot { /** transform: rotate(40deg); -o-transform: rotate(40deg); -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); IE则需要用到一个复杂的滤镜DXImageTransform.Microsoft.Matrix。它一共接受五个参数，前四个参数需要自行计算三角函数，然后分别写成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation)，其中的rotation表示旋转角度，如果顺时针旋转7.5度，则rotation就为7.5；第五个参数 SizingMethod表示重绘方式，'auto expand'代表自动扩展到新的边界。 filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779); */ cursor: pointer; position: absolute; } </style> </head> <body> <div style="position: absolute; top: 185px; left: 200px;"> 北京时间： <div style="position: absolute; top: 15px; left:0px;" id="cbg"> <img id="clock" src="http://bjtime.cn/clock.gif"/> </div> <div style="position: absolute; top: 20px; left: 43px; height:80px; width:80px;" id="runClock"> <img class="rot" id="Hour" src="http://bjtime.cn/shi.gif"> <img class="rot" id="Minute" src="http://bjtime.cn/fen.gif"> <img class="rot" id="Second" src="http://bjtime.cn/miao.gif"> </div> </div> <div style="position: absolute; top: 55px; left: 200px;"> 本地时间： <div style="position: absolute; top: 15px; left:0px;" id="cbg1"> <img id="clock1" src="http://bjtime.cn/clock.gif"/> </div> <div style="position: absolute; top: 20px; left: 43px; height:80px; width:80px;" id="runClock1"> <img class="rot" id="Hour1" src="http://bjtime.cn/shi.gif"> <img class="rot" id="Minute1" src="http://bjtime.cn/fen.gif"> <img class="rot" id="Second1" src="http://bjtime.cn/miao.gif"> </div> </div> </body> <script type="text/javascript" > function clock(initTime,index) { this.time = initTime || new Date(); if(typeof(this.time)=='string' || typeof(this.time)=='number') { this.time = new Date(this.time); } this.index=index||""; this.hr=this.mr=this.sr=this.h=this.m=this.s=0; this.hour=this.minute=this.second=null; var isIE=!!document.all; var obj=this; this.init=function() { obj.s=this.time.getSeconds(); obj.m=this.time.getMinutes(); obj.h=this.time.getHours(); obj.hour=document.getElementById("Hour"+this.index); obj.minute=document.getElementById("Minute"+this.index); obj.second=document.getElementById("Second"+this.index); if(isIE) { document.getElementById("runClock"+this.index).style.left ="4px"; // hour.parentNode.style.left = parseInt( hour.parentNode.style.left)-20 +"px"; } obj.sr = obj.s*6; obj.mr = Math.round((obj.m+obj.s/60)*6); obj.hr = Math.round((obj.h+(obj.m/60))*30)%360; if(isIE) { var m1=Math.cos(degToRad(obj.hr)); var m2=Math.sin(degToRad(obj.hr)); obj.hour.style.cssText = "filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11="+m1+", M12="+(0-m2)+", M21="+m2+", M22="+m1+");"; obj.hour.style.top = 40 - (obj.hour.offsetHeight/2); obj.hour.style.left = 40 - (obj.hour.offsetWidth/2); m1=Math.cos(degToRad(obj.mr)); m2=Math.sin(degToRad(obj.mr)); obj.minute.style.cssText = "filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11="+m1+", M12="+(0-m2)+", M21="+m2+", M22="+m1+");"; obj.minute.style.top = 40 - (obj.minute.offsetHeight/2); obj.minute.style.left = 40 - (obj.minute.offsetWidth/2); m1=Math.cos(degToRad(obj.sr)); m2=Math.sin(degToRad(obj.sr)); obj.second.style.cssText = "filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11="+m1+", M12="+(0-m2)+", M21="+m2+", M22="+m1+");"; obj.second.style.top = 40 - (obj.second.offsetHeight/2); obj.second.style.left = 40 - (obj.second.offsetWidth/2); }else { obj.hour.style.cssText =" transform: rotate("+obj.hr+"deg); -o-transform: rotate("+obj.hr+"deg);-webkit-transform: rotate("+obj.hr+"deg);-moz-transform: rotate("+obj.hr+"deg);"; obj.minute.style.cssText =" transform: rotate("+obj.mr+"deg); -o-transform: rotate("+obj.mr+"deg);-webkit-transform: rotate("+obj.mr+"deg);-moz-transform: rotate("+obj.mr+"deg);"; obj.second.style.cssText =" transform: rotate("+obj.sr+"deg); -o-transform: rotate("+obj.sr+"deg);-webkit-transform: rotate("+obj.sr+"deg);-moz-transform: rotate("+obj.sr+"deg);"; } setInterval(function(){ obj.runClock();},1000); }; this.runClock=function() { var m1=m2=0; obj.sr+=6; if(isIE) { m1=Math.cos(degToRad(obj.sr)); m2=Math.sin(degToRad(obj.sr)); obj.second.style.cssText = "filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11="+m1+", M12="+(0-m2)+", M21="+m2+", M22="+m1+");"; obj.second.style.top = 40 - (obj.second.offsetHeight/2); obj.second.style.left = 40 - (obj.second.offsetWidth/2); }else{ obj.second.style.cssText =" transform: rotate("+obj.sr+"deg); -o-transform: rotate("+obj.sr+"deg);-webkit-transform: rotate("+obj.sr+"deg);-moz-transform: rotate("+obj.sr+"deg);"; } if(obj.sr>=360) { obj.sr=0; } if(obj.sr%60==0) { obj.mr++; if(obj.mr>=360) { obj.mr=0; } if(isIE) { m1=Math.cos(degToRad(obj.mr)); m2=Math.sin(degToRad(obj.mr)); obj.minute.style.cssText = "filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11="+m1+", M12="+ (0-m2)+", M21="+m2+", M22="+m1+");"; obj.minute.style.top = 40 - (obj.minute.offsetHeight/2); obj.minute.style.left = 40 - (obj.minute.offsetWidth/2); }else{ obj.minute.style.cssText =" transform: rotate("+obj.mr+"deg); -o-transform: rotate("+obj.mr+"deg);-webkit-transform: rotate("+obj.mr+"deg);-moz-transform: rotate("+obj.mr+"deg);"; } if(obj.mr%12==0) { obj.hr++; if(obj.hr==360){obj.hr=0;} if(isIE) { m1=Math.cos(degToRad(obj.hr)); m2=Math.sin(degToRad(obj.hr)); obj.hour.style.cssText = "filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11="+m1+", M12="+ (0-m2)+", M21="+m2+", M22="+m1+");"; obj.hour.style.top = 40 - (obj.hour.offsetHeight/2); obj.hour.style.left = 40 - (obj.hour.offsetWidth/2); }else{ obj.hour.style.cssText =" transform: rotate("+obj.hr+"deg); -o-transform: rotate("+obj.hr+"deg);-webkit-transform: rotate("+obj.hr+"deg);-moz-transform: rotate("+obj.hr+"deg);"; } } } }; obj.init(); } function degToRad(x) { return ( x/(360/(2*Math.PI))); } function getBeijingTime(src) { var s = document.createElement('script'); s.type='text/javascript'; s.charset='gb2312'; //'gb2312'; s.src = src; document.getElementsByTagName('head')[0].appendChild(s); } window.baidu_time=function(obj)//"city":"北京","time":1292290756579} { new clock(obj.time);//北京时间 } getBeijingTime("http://open.baidu.com/app?module=beijingtime&t="+Math.random()); new clock(new Date(),1);// 本地时间 </script> </html> ][/code]

奇乐二二二 2012-12-11

打赏
举报

css3里面的rotate可以达到旋转，纯js麻烦吧，要么就用图片。。。

似梦飞花 2012-12-11

打赏
举报

html5貌似有这个功能纯js实现的话有难度啊感觉

吉普赛的歌社区高级成员 T9 2012-12-11

打赏
举报

请用chrome或者firefox来查看。

<!DOCTYPE HTML> 
<html> 
<body> 
<canvas id="canvas" width="600"height="400">     
         <p>Your browserdoes not support the canvas element!</p>     
</canvas>     
      
<script type="text/javascript">     
    var canvas =document.getElementById("canvas");     
    var context2D =canvas.getContext("2d");  
    var pic = new Image();  
    pic.src ="http://avatar.profile.csdn.net/1/8/D/1_sp1234.jpg";  //注意目录结构，这里是把图片和html放在一个目录的 
     
    //注意下面方法中画笔状态的保护，这在很多情况下都会使用到 
    function draw(){ 
        context2D.clearRect(0,0,600,400); 
        context2D.save();//保存画笔状态 
        context2D.rotate(Math.PI/10*Math.random());//开始旋转 
        context2D.drawImage(pic,100, 100); 
        context2D.restore();//绘制结束以后，恢复画笔状态 
    }         
      
    setInterval(draw, 1000); 
      
</script>     
</body> 
</html>

ANDROID，实现imageview的各种操作，手势放大，缩小，旋转等