jQuery实现图像旋转动画效果
更新时间:2016年05月29日 15:06:02 投稿:mrr
jquery动画旋转效果在项目中经常遇到这样的需求,下面小编给大家分享具体实现代码,感兴趣的朋友一起学习吧
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<!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> <title>jQuery Animation - fadeTo </title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div[name='divPop']").bind("click",clickMove).bind("dblclick",forward); }) function clickMove(){ var left = $(this).css("left"); if(left == "350px"){ loginMove("right",2); } else if(left == "150px"){ loginMove("right",1); } else if(left == "455px"){ loginMove("right",3); } else if(left == "650px"){ loginMove("left",1); } else if(left == "530px"){ loginMove("left",2); } else{ var cla = $(this).attr("class"); switch (cla) { case "login_1": forward("http://www.baidu.com/");break; case "login_2": forward("http://www.google.cn/");break; case "login_3": forward("http://www.163.com/");break; case "login_4": forward("http://www.sina.com.cn/");break; case "login_5": forward("http://www.sohu.com/");break; case "login_6": forward("http://www.qq.com/");break; default: forward('#'); } } } function loginMove(direction,index){ //动画函数 var timerId; if(index<=0){ clearInterval(timerId); //取消动画功能 return; } var div = $("[name='divPop']"); //取得所有div var divdivLength = div.length; if(direction=="left"){ div[-1] = div[divLength-1] var n=-2; } else{ div[divLength] = div[0]; var n = 0; } div.each(function(){ //jquery封装的动画功能 ++n; $(this).animate( { "top":$(div[n]).css("top"), //取得下一个目标位置div的参数 "left":$(div[n]).css("left"), "width":$(div[n]).width(), "height":$(div[n]).height() }, 600, function(){ if($(this).css("top")=='150px'){ $(this).css({zIndex:3}); //设置图层置顶 } else if ($(this).css("top")=='170px'){ $(this).css({zIndex:2}); } else if ($(this).css("top")=='80px'){ $(this).css({zIndex:1}); } else { $(this).css({zIndex:0}); } } ); }) timerId = setInterval(function(){ loginMove(direction,--index); },650); } function forward(url){ window.location.href = url; } </script> </head> <body> <div name="divPop" class="login_1" style="background-color:#f0f0f0;border:solid 1px ;cursor:pointer; width:355px; height:343px; position:absolute; left:330px; top:150px; z-index:3; filter:alpha(opacity=90);"> <div style="text-align:center;">百度</div> </div> <div name="divPop" class="login_2" style="background-color:blue;border:solid 1px;cursor:pointer; width:220px; height:230px; position:absolute; left:650px; top:170px; z-index:2; filter:alpha(opacity=90);"> <div style="text-align:center;">Google</div> </div> <div name="divPop" class="login_3" style="background-color:yellow;border:solid 1px;cursor:pointer; width:136px; height:130px; position:absolute; left:530px; top:80px; z-index:1; filter:alpha(opacity=90); "> <div style="text-align:center;">网易</div> </div> <div name="divPop" class="login_4" style="background-color:red;border:solid 1px;cursor:pointer; width:105px; height:100px; position:absolute; left:455px; top:50px; z-index:0; filter:alpha(opacity=90); "> <div style="text-align:center;">新浪</div> </div> <div name="divPop" class="login_5" style="background-color:#00ff00;border:solid 1px;cursor:pointer; width:136px; height:130px; position:absolute; left:350px; top:80px; z-index:1; filter:alpha(opacity=90); "> <div style="text-align:center;font:write">阿里巴巴</div> </div> <div name="divPop" class="login_6" style="background-color:green;border:solid 1px;cursor:pointer; width:220px; height:230px; position:absolute; left:150px; top:170px; z-index:2; filter:alpha(opacity=90); "> <div style="text-align:center;font:write">腾讯</div> </div> </body> </html>
以上所述是小编给大家介绍的jQuery实现图像旋转动画效果,希望对大家有所帮助!
您可能感兴趣的文章:
相关文章
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
本文是作者学习jQuery之后练手之作,兼容各大浏览器,非常的精美实用,这里放出来给小伙伴们,有需要的直接拿走,别跟我客气^_^2014-11-11jQuery中的read和JavaScript中的onload函数的区别
这篇文章主要介绍了jQuery中的read和JavaScript中的onload函数的区别,这两个函数在web编程中是最常用的,一定要搞清楚它们的区别,需要的朋友可以参考下2014-08-08浅析jQuery对select操作小结(遍历option,操作option)
本篇文章是关于jQuery对select的操作进行了总结介绍,需要的朋友可以参考下2013-07-07jQuery实现可以控制图片旋转角度效果(附demo源码下载)
这篇文章主要介绍了jQuery实现可以控制图片旋转角度效果,可实现通过下方的滑块拖动控制图片旋转的功能,涉及jQuery操作页面元素样式动态变换的技巧,并附带demo源码供读者下载,需要的朋友可以参考下2016-01-01
最新评论