技术文章 订阅所有【技术文章】的日志

JavaScript图片旋转一周效果

作者:admin 日期:2012-04-14

字体大小: 小 中 大

使图片进行360度旋转一周。能够兼容所有浏览器。IE使:matirx滤镜 webkit: webkitTransform Opera: OTransform firefox:MozTransform。

很眩的一个JavaScript效果，其中对浏览器兼容性的处理可能经常用到，值得借鉴！

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title> ImageRotation </title>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6. <style type="text/css">  
  7. #demo { cursor:pointer; position:absolute;filter:progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");}   
  8. </style>  
  9. </head>  
  10. <body>  
  11. <div id="container" style="width:500px;height:350px;position:relative;margin:0 auto">  
  12.     <div id="demo">  
  13.         <img src="http://img.baidu.com/img/logo-zhidao.gif" />  
  14.     </div>  
  15. </div>  
  16. <script>  
  17. var Img = function() {   
  18.     var T$ = function(id) { return document.getElementById(id); }   
  19.     var ua = navigator.userAgent,   
  20.         isIE = /msie/i.test(ua) && !window.opera;   
  21.     var i = 0, sinDeg = 0, cosDeg = 0, timer = null ;   
  22.     var rotate = function(target, degree) {   
  23.         target = T$(target);   
  24.         var orginW = target.clientWidth, orginH = target.clientHeight;   
  25.             clearInterval(timer);   
  26.         function run(angle) {   
  27.             if (isIE) { // IE   
  28.                 cosDeg = Math.cos(angle * Math.PI / 180);   
  29.                 sinDeg = Math.sin(angle * Math.PI / 180);   
  30.                 with(target.filters.item(0)) {   
  31.                     M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);    
  32.                 }   
  33.                 target.style.top = (orginH - target.offsetHeight) / 2 + 'px';   
  34.                 target.style.left = (orginW - target.offsetWidth) / 2 + 'px';   
  35.             } else if (target.style.MozTransform !== undefined) {  // Mozilla   
  36.                 target.style.MozTransform = 'rotate(' + angle + 'deg)';   
  37.             } else if (target.style.OTransform !== undefined) {   // Opera   
  38.                 target.style.OTransform = 'rotate(' + angle + 'deg)';   
  39.             } else if (target.style.webkitTransform !== undefined) { // Chrome Safari   
  40.                 target.style.webkitTransform = 'rotate(' + angle + 'deg)';   
  41.             } else {   
  42.                 target.style.transform = "rotate(" + angle + "deg)";   
  43.             }   
  44.         }   
  45.            
  46.         timer = setInterval(function() {   
  47.             i += 10;   
  48.             run(i);   
  49.             if (i > degree - 1) {   
  50.                 i = 0;   
  51.                 clearInterval(timer);   
  52.             }    
  53.         }, 10);    
  54.     }   
  55.     return {rotate: rotate}   
  56. }();   
  57. window.onload = function() {   
  58.     Img.rotate('demo', 360);   
  59.     document.getElementById('demo').onclick = function() {   
  60.         Img.rotate('demo', 360);   
  61.     }   
  62. }   
  63. </script>  
  64. </body>  
  65. </html>    


上一篇: Javascript兼容 IE Firefox 的键盘控制事件
下一篇: Javascript图片预加载技术
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: javascript
相关日志:
评论: 0 | 引用: 0 | 查看次数: 2133
发表评论
昵　称:
密　码: 游客发言不需要密码.
邮　箱: 邮件地址支持Gravatar头像,邮箱地址不会公开.
网　址: 输入网址便于回访.
内　容:
验证码:
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
字数限制 1000 字 | UBB代码 开启 | [img]标签 关闭

 广告位

↑返回顶部↑