Jquery3D效果

今天做需求碰到一個類似3D效果圖一樣的如下圖所示：

這種效果原理就是用定位 position:absolute；z-index:XX；由於這種效果以前有個同事用jquery做過這樣的所以今天看了他的程式碼仿照下做了一個，用Jquery animate這個函式可以做通過移動圖片不斷的給他們定義樣式及定位就可以了！但是有個問題要注意下：第一程式碼很撮程式碼不能重用，只能實現效果！因為我今天做的需求有兩個這樣的所以要重複的寫不同的程式碼，第二：由於這是jquery，那當然要引入Jquery壓縮包，很奇怪的是引入線上的Google API Jquery壓縮包在IE下點選右箭頭時會報錯貌似說jquery壓縮包裡面引數無效！在火狐和谷歌遊覽器都是正常的！所以之後引入了Jquery1.7壓縮包就可以正常執行了沒有錯誤了可能是jquery新版本增加了一些屬性吧！第三要慢慢的理解順時針旋轉和逆時針旋轉，可能在理解的過程中某某同學會暈頭啊，我本人也曾經暈過頭呵呵！做不到那種效果！只有注意精神理解下就可以了！下面是HTML程式碼！

<!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>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>無標題文件</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0; font-size:12px; font-family:”宋體”;}
table{ border-collapse:collapse; border-spacing:0;}
fieldset,img{ border:0; display:block;}
address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal; font-weight:normal;}
ol,ul{ list-style:none;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}
.fl{ float:left;}
.fr{ float:right;}
.marquee1{ width:402px; height:158px; overflow:hidden;}
.J_btn{width:21px; height:23px; overflow:hidden; margin-top:70px;}
.prev{ background:url(images/prev.jpg) no-repeat; cursor:pointer;}
.M_scroll{ position:relative; float:left; margin:0 8px 0 16px; display:inline; width:335px; height:158px;}
.M_scroll ul{width:335px; height:158px;}
.next{ background:url(images/next.jpg) no-repeat; cursor:pointer;}
.num1,.num3{ background:url(images/wbg2.jpg) no-repeat; width:109px; height:109px; overflow:hidden;}
.num1{ position:absolute; top:25px; left:0; z-index:999;}
.num1 .conpic{ margin:4px;width:150px; height:101px; overflow:hidden;}
.num3 .conpic{margin:4px;width:100px; height:101px; overflow:hidden;}
.num3{ position:absolute; top:25px; left:228px; z-index:1000;}
.num2{ position:absolute; top:0; left:88px; z-index:1001; background:url(images/wbg.jpg) no-repeat; width:158px; height:158px; overflow:hidden;}
.num2 .conpic{ margin:4px 4px; width:150px; height:150px; overflow:hidden;}
</style>
<script type=“text/javascript” src=“http://code.jquery.com/jquery-1.7.1.min.js”></script>
</head>
<body>
<div class=“marquee1 fl”>
<div class=“prev J_btn fl”></div>
<div class=“M_scroll”>
<ul>
<li class=“num1”>
<div class=“conpic”>
<a href=“#” target=“_blank”><img src=“http://img03.taobaocdn.com/tps/i3/T1xSyJXcBhXXXXXXXX-539-314.jpg” width=“150” height=“150”/></a>
</div>
</li>
<li class=“num2”>
<div class=“conpic”>
<a href=“#” target=“_blank”><img src=“images/photo.jpg” width=“150” height=“150”/></a>
</div>
</li>
<li class=“num3”>
<div class=“conpic”>
<a href=“#” target=“_blank”><img src=“http://img02.taobaocdn.com/tps/i2/T1H0qHXihkXXXXXXXX-539-314.png” width=“150” height=“150”/></a>
</div>
</li>
</ul>
</div>
<div class=“next J_btn fl”></div>
</div>
<script type=“text/javascript” src=“3D.js”></script>
</body>
</html>

Javascript程式碼：

$(function(){
var t = 400;
$(“.prev”).click(function(){
if($(“.M_scroll li:eq(1)”).css(“left”)==“88px”){
centerFunction(2);
rightFunction(3);
leftFunction(1);
};
if($(“.M_scroll li:eq(2)”).css(“left”)==“88px”){
centerFunction(3);
rightFunction(1);
leftFunction(2);
};
if($(“.M_scroll li:eq(0)”).css(“left”)==“88px”){
centerFunction(1);
rightFunction(2);
leftFunction(3);
};
});
$(“.next”).click(function(){
if($(“.M_scroll li:eq(1)”).css(“left”)==“88px”){
nextCenter(2);
nextRight(3);
nextLeft(1);
};
if($(“.M_scroll li:eq(2)”).css(“left”)==“88px”){
nextCenter(3);
nextRight(1);
nextLeft(2);
};
if($(“.M_scroll li:eq(0)”).css(“left”)==“88px”){
nextCenter(1);
nextRight(2);
nextLeft(3);
};
})
/** 順時針旋轉 */
function centerFunction(num){
$(“.num” +num).animate({“width”:“109px”,“height”:“109px”,“left”:“0px”,“top” : “25px”,“z-index”: “999”},t,function(){
$(this).css(“background-image”,“url(images/wbg2.jpg)”);
}).children(“.conpic”).animate({“width”:“101px”,“height”:“101px”},t,function(){
$(this).children(“img”).css({“width”:“150px”,“height”:“101px”});
});
}
function leftFunction(num){
$(“.num”+num).animate({“width”:“109px”,“height”:“109px”,“left”:“228px”,“top”:“25px”,“z-index”:“1000”},t,function(){
$(this).css(“background-image”,“url(images/wbg2.jpg)”);
}).children(“.conpic”).animate({“width”:“100px”,“height”:“101px”},t,function(){
$(this).children(“img”).css({“width”:“100px”,“height”:“101px”});
});
}
function rightFunction(num){
$(“.num”+num).animate({“width”:“158px”,“height”:“158px”,“left”:“88px”,“top”:“0px”,“z-index”:“1001”},t,function(){
$(this).css(“background-image”,“url(images/wbg.jpg)”);
}).children(“.conpic”).animate({“width”:“150px”,“height”:“150px”},t,function(){
$(this).children(“img”).css({“width”:“150px”,“height”:“150px”});
});
}
/*逆時針旋轉 */
function nextCenter(num){
$(“.num”+num).animate({“width”:“109px”,“height”:“109px”,“left”:“228px”,“top”:“25px”,“z-index”:“999”},t,function(){
$(this).css(“background-image”,“url(images/wbg2.jpg)”);
}).children(“.conpic”).animate({“width”:“100px”,“height”:“101px”},t,function(){
$(this).children(“img”).css({“width”:“100px”,“height”:“101px”});
});
}
function nextRight(num){
$(“.num”+num).animate({“width”:“109px”,“height”:“109px”,“left”:“0px”,“top”:“25px”,“z-index”:“1000”},t,function(){
$(this).css(“background-image”,“url(images/wbg2.jpg)”);
}).children(“.conpic”).animate({“width”:“100px;”,“height”:“101px”},t,function(){
$(this).children(“img”).css({“width”:“100px”,“height”:“101px”});
});
}
function nextLeft(num){
$(“.num” +num).animate({“width”:“158px”,“height”:“158px”,“left”:“88px”,“top” : “0px”,“z-index”: “1001”},t,function(){
$(this).css(“background-image”,“url(images/wbg.jpg)”);
}).children(“.conpic”).animate({“width”:“150px”,“height”:“150px”},t,function(){
$(this).children(“img”).css({“width”:“150px”,“height”:“150px”});
});
}
});

下面有附件下載可以看看！

附件：http://down.51cto.com/data/2359656

本文轉自塗根華 51CTO部落格，原文連結：http://blog.51cto.com/tugenhua/762839，如需轉載請自行聯絡原作者

Jquery3D效果

相關文章