jquery实现图像旋转动画

mengqingyu · 发表于 2013-2-7 23:45:52

附带实例下载
<!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"> var timerId; $(document).ready(function(){ timerId = setInterval(function(){ //页面加载时调用定时器运行动画 testMove("left"); },6000); $(".login_1").bind("click",function(){ //绑定百度图片点击事件 forward("http://www.baidu.com/"); }) }) function testMove(direction){//动画函数 $("#left").hide();//运行时隐藏按钮 $("#right").hide(); clearInterval(timerId);//取消动画功能 var div = $("[name='divPop']");//取得所有div var divLength = 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封装的动画功能 $(this).animate( { "top":$(div[++n]).position().top,//取得下一个目标位置div的参数 "left":$(div[n]).position().left, "width":$(div[n]).width(), "height":$(div[n]).height(), "opacity":$(div[n]).css("opacity") }, 500, function(){ if($(this).position().top==150){ $(this).css({zIndex:3});//设置图层置顶 $(this).css({cursor:"pointer"}); $(this).bind("click",function(){ 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('#'); } }) } else if ($(this).position().top==170){ $(this).css({zIndex:2}); $(this).css({cursor:"default"}); $(this).unbind("click");//当图片不在中间时取消点击事件 } else if ($(this).position().top==80){ $(this).css({zIndex:1}); $(this).css({cursor:"default"}); $(this).unbind("click"); } else { $(this).css({zIndex:0}); $(this).css({cursor:"default"}); $(this).unbind("click"); } $("#left").show(); $("#right").show(); } ); }) timerId = setInterval(function(){ testMove("left"); },6000); } function forward(url){ window.location.href = url; } </script> </head><body> <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;"> <div style="text-align:center;">百度</div> </div><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;"><div style="text-align:center;">Google</div> </div> <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;"><div style="text-align:center;">网易</div> </div> <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;"><div style="text-align:center;">新浪</div> </div> <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;"><div style="text-align:center;font:write">搜狐</div> </div> <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;"><div style="text-align:center;font:write">腾讯</div> </div> <div style="position:absolute;left:450px;top:550px"><input id="left" type="button" value="向左" /> <input id="right" type="button" value="向右" /> </div> </body></html>

		自动登录	找回密码
密码			立即注册