jQuery實現磁力圖片跟隨效果完整示例
688
2024-02-18
廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<!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="http://www.gimoo.net/t/1902/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實現圖像旋轉動畫效果，希望對大家有所幫助！
