<!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>JS+css打造的個性的推門式橫向圖片切換效果丨芯晴網(wǎng)頁特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代碼加到<head>與</head>之間-->
<style type="text/css">
*{margin:0;padding:0;border:0;}
.aa{width:701px;height:160px;overflow:hidden;position:relative;border:1px #eee solid;}
.aa dt{width:35px;height:160px;overflow:hidden;position:absolute;background:url(http://www.csrcode.cn/imagesforcode/201207/title.png) no-repeat 0 0;}
.aa dd{width:526px;height:160px;overflow:hidden;position:absolute;}
dt.t1{background-position:0 top;}
dt.t2{background-position:-35px top;}
dt.t3{background-position:-70px top;}
dt.t4{background-position:-105px top;}
dt.t5{background-position:-140px top;}
dt.t6{background-position:-170px top;}
</style>
<script type="text/javascript" src="http://www.csrcode.cn/images/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var dt=$(".aa dt");
var dd=$(".aa dd");
var space=526;//圖片寬度
var tw=35;//標(biāo)題寬度
var len=dt.length;//標(biāo)題個數(shù)
var leftArray=new Array();//標(biāo)題left數(shù)組
var rightArray=new Array();//標(biāo)題right數(shù)組
var dlArray=new Array();//圖片left數(shù)組
var drArray=new Array();//圖片right數(shù)組
//元素初始化
for(i=0;i<len;i++){
$(dt[i]).css({"left":i*tw+"px","z-index":i});//標(biāo)題left及z軸設(shè)置
$(dd[i]).css({"left":(i+1)*tw+"px","z-index":i});//圖片left及z軸設(shè)置
$(dt[i]).attr("title",i);//標(biāo)題添加title，主要解決i的閉包問題
leftArray[i]=i*tw;//計算標(biāo)題的左側(cè)left位置數(shù)組
rightArray[i]=leftArray[i]+space;//計算標(biāo)題右側(cè)的left位置數(shù)組
dlArray[i]=(i+1)*tw;//計算圖片左側(cè)left位置數(shù)組
drArray[i]=(tw*len+space)-(len-i-1)*tw;//計算圖片右側(cè)left位置數(shù)組
//加載鼠標(biāo)經(jīng)過事件
$(dt[i]).mouseover(function(){
mT=parseInt($(this).attr("title"));
$(dt[mT]).css({"background-position":-(mT*tw)+"px -160px"});
moveAll(mT);
});
//鼠標(biāo)移除后改變圖片背景
$(dt[i]).mouseout(function(){
$(dt[mT]).css({"background-position":-(mT*tw)+"px 0px"});
});
}
//主體運動函數(shù)
function moveAll(mT){
//鼠標(biāo)經(jīng)過時停止全部動畫，防止連續(xù)移動鼠標(biāo)造成動畫不連貫的問題
for(j=0;j<len;j++){
$(dt[j]).stop();
$(dd[j]).stop();
}
//鼠標(biāo)【當(dāng)前標(biāo)題】右側(cè)的標(biāo)題像右移動
for(m=mT;m<len;m++){
$(dt[m+1]).animate({"left":rightArray[m+1]+"px"},"slow");
$(dd[m+1]).animate({"left":drArray[m+1]+"px"},"slow");
}
//鼠標(biāo)【當(dāng)前標(biāo)題】左側(cè)的圖標(biāo)向左移動
for(n=0;n<mT;n++){
$(dt[n+1]).animate({"left":leftArray[n+1]+"px"},"slow");
$(dd[n+1]).animate({"left":dlArray[n+1]+"px"},"slow");
}
}
});
</script>
</head>
<body>
預(yù)覽效果時左下角會提示錯誤，而且看不到效果，刷新一下就可以看到效果了；當(dāng)然，在實際使用中，不會出現(xiàn)這樣的問題。<br>
<!--把下面代碼加到<body>與</body>之間-->
<div class="aa">
<dl>
<dt class="t1"></dt>
<dd><img src="http://www.csrcode.cn/imagesforcode/201207/U3405P704T1D718F3DT20110114172515.jpg"></dd>
<dt class="t2"></dt>
<dd><img src="/imagesforcode/201207/U246P704T108D47F4566DT20101119111422.jpg"></dd>
<dt class="t3"></dt>
<dd><img src="http://www.csrcode.cn/imagesforcode/201207/U246P704T108D47F4567DT20101119111422.jpg"></dd>
<dt class="t4"></dt>
<dd><img src="http://www.csrcode.cn/imagesforcode/201207/U246P704T108D47F4569DT20101119111422.jpg"></dd>
<dt class="t5"></dt>
<dd><img src="http://www.csrcode.cn/imagesforcode/201207/U3405P704T108D47F4570DT20101224165618.jpg"></dd>
</dl>
</div>
</body>
</html>
<br>第一次運行本代碼，請刷新一下本頁面先~~~<br>所需
js文件：<a >jquery-1.4.min.js</a><br><hr><p align="center"><font color=black>本特效由 <a target="_blank">芯晴網(wǎng)頁特效</a>丨CsrCode.Cn 收集于互聯(lián)網(wǎng)，只為興趣與學(xué)習(xí)交流，不作商業(yè)用途。</font></p>
