`
linqincai
  • 浏览: 24141 次
  • 性别: Icon_minigender_1
  • 来自: 温州
社区版块
存档分类
最新评论

jquery实现图像旋转动画

    博客分类：
  • j2ee
jQueryCSS百度腾讯JavaScript
阅读更多

本文转载自：http://mengqingyu.iteye.com/blog/468414

 

附带实例下载

Js代码 复制代码
  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>jQuery Animation - fadeTo </title>       
  5.         <script type="text/javascript" src="jquery.js"></script>    
  6.    <script type="text/javascript">   
  7.     var timerId;   
  8.     $(document).ready(function(){   
  9.         timerId = setInterval(function(){  //页面加载时调用定时器运行动画   
  10.             testMove("left");   
  11.         },6000);           
  12.         $(".login_1").bind("click",function(){ //绑定百度图片点击事件   
  13.             forward("http://www.baidu.com/");   
  14.         })   
  15.     })     
  16.      function testMove(direction){  //动画函数   
  17.         $("#left").hide();                      //运行时隐藏按钮   
  18.         $("#right").hide();   
  19.         clearInterval(timerId);             //取消动画功能   
  20.         var div = $("[name='divPop']"); //取得所有div   
  21.         var divLength = div.length;   
  22.         if(direction=="left"){   
  23.             div[-1] = div[divLength-1]     
  24.             var n=-2;   
  25.         }   
  26.         else{   
  27.             div[divLength] = div[0];   
  28.             var n = 0;   
  29.         }   
  30.         div.each(function(){    //jquery封装的动画功能   
  31.             $(this).animate(   
  32.                 {   
  33.                     "top":$(div[++n]).position().top,           //取得下一个目标位置div的参数   
  34.                     "left":$(div[n]).position().left,   
  35.                     "width":$(div[n]).width(),   
  36.                     "height":$(div[n]).height(),   
  37.                     "opacity":$(div[n]).css("opacity")   
  38.                 },   
  39.                 500,   
  40.                 function(){     
  41.                     if($(this).position().top==150){   
  42.                         $(this).css({zIndex:3});    //设置图层置顶   
  43.                         $(this).css({cursor:"pointer"});           
  44.                         $(this).bind("click",function(){   
  45.                             var cla = $(this).attr("class");   
  46.                             switch (cla) {     
  47.                                    case "login_1": forward("http://www.baidu.com/");break;     
  48.                                    case "login_2": forward("http://www.google.cn/");break;    
  49.                                 case "login_3": forward("http://www.163.com/");break;     
  50.                                 case "login_4": forward("http://www.sina.com.cn/");break;    
  51.                                 case "login_5": forward("http://www.sohu.com/");break;    
  52.                                 case "login_6": forward("http://www.qq.com/");break;    
  53.                                 default: forward('#');   
  54.                             }   
  55.                         })   
  56.                     }   
  57.                     else if ($(this).position().top==170){   
  58.                         $(this).css({zIndex:2});   
  59.     $(this).css({cursor:"default"});   
  60.                         $(this).unbind("click");            //当图片不在中间时取消点击事件   
  61.                     }   
  62.                     else if ($(this).position().top==80){                                 
  63.                         $(this).css({zIndex:1});   
  64.     $(this).css({cursor:"default"});   
  65.                         $(this).unbind("click");   
  66.                     }      
  67.                     else {   
  68.                         $(this).css({zIndex:0});   
  69.     $(this).css({cursor:"default"});   
  70.                         $(this).unbind("click");   
  71.                     }              
  72.                     $("#left").show();   
  73.                     $("#right").show();            
  74.                 }   
  75.             );   
  76.         })   
  77.         timerId = setInterval(function(){     
  78.             testMove("left");   
  79.         },6000);   
  80.      }     
  81.      function forward(url){   
  82.         window.location.href = url;   
  83.      }   
  84.    </script>   
  85.   </head>   
  86. <body>              
  87. <div name="divPop"  class="login_1" style="background-color:#f0f0f0;border:solid 1px #000000;cursor:pointer; width:355px; height:343px; overflow:hidden; position:absolute; left:330px; top:150px; z-index:3; filter:alpha(opacity=100); opacity:1; -ms-interpolation-mode:bicubic;">    
  88.     <div style="text-align:center;">百度</div>       
  89. </div>   
  90. <div name="divPop"  class="login_2" style="background-color:blue;border:solid 1px #000000;width:220px; height:230px; overflow:hidden; position:absolute; left:650px; top:170px; z-index:2; filter:alpha(opacity=70); opacity:0.7; -ms-interpolation-mode:bicubic;">   
  91.     <div style="text-align:center;">Google</div>       
  92. </div>      
  93. <div name="divPop"  class="login_3" style="background-color:yellow;border:solid 1px #000000;width:136px; height:130px; overflow:hidden; position:absolute; left:530px; top:80px; z-index:1; filter:alpha(opacity=70); opacity:0.7; -ms-interpolation-mode:bicubic;">   
  94.     <div style="text-align:center;">网易</div>       
  95. </div>      
  96. <div name="divPop"  class="login_4" style="background-color:red;border:solid 1px #000000;width:105px; height:100px; overflow:hidden; position:absolute; left:455px; top:50px; z-index:0; filter:alpha(opacity=70); opacity:0.7; -ms-interpolation-mode:bicubic;">   
  97.     <div style="text-align:center;">新浪</div>       
  98. </div>     
  99. <div name="divPop"  class="login_5" style="background-color:black;border:solid 1px #000000;width:136px; height:130px; overflow:hidden; position:absolute; left:350px; top:80px; z-index:1; filter:alpha(opacity=70); opacity:0.7; -ms-interpolation-mode:bicubic;">   
  100.     <div style="text-align:center;font:write">搜狐</div>     
  101. </div>     
  102. <div name="divPop"  class="login_6" style="background-color:green;border:solid 1px #000000;width:220px; height:230px; overflow:hidden; position:absolute; left:150px; top:170px; z-index:2; filter:alpha(opacity=70); opacity:0.7; -ms-interpolation-mode:bicubic;">   
  103.     <div style="text-align:center;font:write">腾讯</div>     
  104. </div>     
  105. <div style="position:absolute;left:450px;top:550px">   
  106.     <input id="left" type="button" value="向左" onClick="testMove('right')"/>     
  107.     <input id="right" type="button" value="向右" onClick="testMove('left')"/>     
  108. </div>      
  109.   
  110. </body>   
  111. </html>  
分享到：
| CKEditor 3.0 配置 使用
评论
1 楼 flyfish_ 2012-03-26  
不错。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics