`
linqincai
  • 浏览: 24537 次
  • 性别: 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  
不错。
发表评论

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

相关推荐

    jQuery实现图像旋转动画效果

    jQuery 实现图像旋转动画效果是网页动态效果中的常见需求，它能为用户体验增添趣味性和互动性。在本篇文章中，我们将探讨如何使用 jQuery 来创建图像旋转动画，并通过具体的代码示例来理解其工作原理。 首先，确保...

    jQuery 实现立体旋转木马

    3. **动画**：jQuery的`.animate()`方法可以用于创建平滑的动画效果，结合CSS3转换，我们可以实现卡片的平滑旋转和进出。 4. **事件处理**：jQuery的`.on()`方法用于绑定事件监听器，例如点击事件，当用户点击下...

    jquery实现图片旋转(js实现)

    本文将深入探讨如何使用jQuery来实现图片旋转功能，并兼容IE、Firefox、Opera和Chrome等主流浏览器。 首先，要实现图片旋转，我们需要理解CSS3中的`transform`属性，尤其是`rotate()`函数。`rotate()`允许我们以...

    jquery实现3D旋转轮播图片代码.zip

    3. JavaScript文件：主要的jQuery代码，实现轮播功能，包括图片的切换逻辑、3D旋转动画等。 4. 图片文件：实际展示的轮播图片。 5. 可能还包含其他辅助文件，如图标、JSON配置文件或README文档，提供关于如何使用和...

    jquery实现360度旋转

    本文将深入探讨如何使用jQuery实现360度图像旋转效果，这是一种常见于产品展示、虚拟现实或互动设计中的技术。 首先，要实现360度旋转，我们需要准备一系列连续拍摄的产品图片，这些图片通常是围绕产品中心360度...

    3D旋转展示产品图片的特效,基于jQuery实现.rar

    5. **动画实现**：在点击事件处理函数中，通过修改CSS3的`transform`属性值，实现3D旋转。可以使用`transition`属性控制旋转的平滑过渡效果，以及`transform-style: preserve-3d;`保持3D空间中的子元素。 6. **控制...

    jquery 360度旋转插件

    elbeanio-jquery.tagsphere还支持自定义事件，比如在旋转开始、结束或者达到特定角度时触发回调函数，这为开发者提供了更多可能性，可以结合其他功能如动画、数据交互等进行更复杂的场景构建。 总结来说，elbeanio-...

    jQuery切割过渡效果图像滑块.zip

    具体实现可能涉及到CSS3的transform属性，例如translateX和rotate，结合jQuery的动画函数，精确控制每个切片的移动和旋转，以形成连续而富有动态感的过渡。 左右箭头是用户导航的重要组成部分，它们允许用户手动...

    jquery+css3实现图像三维旋转效果.zip

    下面将详细阐述如何使用这些技术来创建动态的、视觉吸引人的图像旋转效果。 首先，`index.html` 是主网页文件，它包含了页面的基本结构和引用外部资源的链接。在 HTML 中，通常会有一个 `&lt;div&gt;` 元素用于包裹要旋转...

    jquery 3D图片旋转木马_图片叠加自动轮播旋转切换代码

    为了实现平滑的过渡效果，jQuery提供了animate方法，可以创建自定义的动画效果，包括3D旋转。结合CSS3的transition属性，可以实现流畅的动画过渡，提高用户体验。 在实际开发中，还需要考虑浏览器兼容性问题，因为...

    jQuery按钮控制叠加图片旋转木马切换代码.zip

    本示例中的“jQuery按钮控制叠加图片旋转木马切换代码”是一个利用jQuery实现的交互式图片展示功能，常用于产品展示或者图像滑动效果。下面我们将深入探讨这一技术的核心知识点： 1. **jQuery库**：jQuery是...

    jquery圆形旋转特效.zip

    这个特效的核心在于jQuery的动画功能，它通过修改CSS属性（如transform和transition）来实现元素的旋转效果。在CSS中，`transform`属性允许我们对元素进行旋转、缩放、移动等变换，而`transition`属性则定义了这些...

    jQuery+CSS3旋转动画轮播幻灯特效代码

    在本文中，我们将深入探讨如何使用jQuery和CSS3来创建一个具有旋转动画效果的轮播幻灯片特效。这个特效可以为网站增添动态视觉吸引力，提高用户体验，尤其适用于产品展示或图片滑动导航。 首先，jQuery是一个强大的...

    jQuery图像旋转插件jQueryReel.zip

    Reel 是现今建立的功能最全的 jQuery 图像 360 度旋转插件。它利用新的技术使普通的图像标记变成一个全方位 360 度交互的对象电影，全景或者定格动画。在线演示 标签：jQuery

    Jquery实现的转盘抽奖

    - JavaScript文件（可能包括jQuery库）：实现抽奖逻辑，包括点击事件处理、动画效果、随机数生成和概率控制。 - 图片资源：可能包括转盘的背景图、奖品图标等。 综上所述，实现一个jQuery转盘抽奖功能需要结合HTML...

    HTML—jquery特效3D立体图像查看

    在3D图像查看器中，jQuery可以帮助我们更便捷地响应用户的交互，如点击、拖动等，并实现平滑的图像旋转或缩放动画。 要实现3D立体图像查看，我们需要理解以下几个关键概念： 1. **CSS3 3D变换**：CSS3提供了...

    jQuery头像左右动画旋转并支持裁剪

    在本文中，我们将深入探讨如何使用jQuery实现头像的左右动画旋转以及支持裁剪功能。jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果和Ajax交互等任务。对于创建动态和交互式的网页...

    jquery 3D立体图像查看

    本文将深入探讨"jQuery 3D立体图像查看"这一主题，这通常指的是利用jQuery来实现一种增强用户体验的3D图像展示技术。 首先，我们需要理解3D图像查看的基本原理。在网页中，3D效果通常是通过CSS3的transform属性或者...

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