jQuery实现图像旋转动画效果
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQueryAnimation-fadeTo</title>
<scripttype="text/javascript"src="jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("div[name='divPop']").bind("click",clickMove).bind("dblclick",forward);
})
functionclickMove(){
varleft=$(this).css("left");
if(left=="350px"){
loginMove("right",2);
}
elseif(left=="150px"){
loginMove("right",1);
}
elseif(left=="455px"){
loginMove("right",3);
}
elseif(left=="650px"){
loginMove("left",1);
}
elseif(left=="530px"){
loginMove("left",2);
}
else{
varcla=$(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('#');
}
}
}
functionloginMove(direction,index){//动画函数
vartimerId;
if(index<=0){
clearInterval(timerId);//取消动画功能
return;
}
vardiv=$("[name='divPop']");//取得所有div
vardivdivLength=div.length;
if(direction=="left"){
div[-1]=div[divLength-1]
varn=-2;
}
else{
div[divLength]=div[0];
varn=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});//设置图层置顶
}
elseif($(this).css("top")=='170px'){
$(this).css({zIndex:2});
}
elseif($(this).css("top")=='80px'){
$(this).css({zIndex:1});
}
else{
$(this).css({zIndex:0});
}
}
);
})
timerId=setInterval(function(){
loginMove(direction,--index);
},650);
}
functionforward(url){
window.location.href=url;
}
</script>
</head>
<body>
<divname="divPop"class="login_1"style="background-color:#f0f0f0;border:solid1px;cursor:pointer;width:355px;height:343px;position:absolute;left:330px;top:150px;z-index:3;filter:alpha(opacity=90);">
<divstyle="text-align:center;">百度</div>
</div>
<divname="divPop"class="login_2"style="background-color:blue;border:solid1px;cursor:pointer;width:220px;height:230px;position:absolute;left:650px;top:170px;z-index:2;filter:alpha(opacity=90);">
<divstyle="text-align:center;">Google</div>
</div>
<divname="divPop"class="login_3"style="background-color:yellow;border:solid1px;cursor:pointer;width:136px;height:130px;position:absolute;left:530px;top:80px;z-index:1;filter:alpha(opacity=90);">
<divstyle="text-align:center;">网易</div>
</div>
<divname="divPop"class="login_4"style="background-color:red;border:solid1px;cursor:pointer;width:105px;height:100px;position:absolute;left:455px;top:50px;z-index:0;filter:alpha(opacity=90);">
<divstyle="text-align:center;">新浪</div>
</div>
<divname="divPop"class="login_5"style="background-color:#00ff00;border:solid1px;cursor:pointer;width:136px;height:130px;position:absolute;left:350px;top:80px;z-index:1;filter:alpha(opacity=90);">
<divstyle="text-align:center;font:write">阿里巴巴</div>
</div>
<divname="divPop"class="login_6"style="background-color:green;border:solid1px;cursor:pointer;width:220px;height:230px;position:absolute;left:150px;top:170px;z-index:2;filter:alpha(opacity=90);">
<divstyle="text-align:center;font:write">腾讯</div>
</div>
</body>
</html>
以上所述是小编给大家介绍的jQuery实现图像旋转动画效果，希望对大家有所帮助！