<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <title>JS+css打造的个性的推门式横向图片切换效果丨芯晴网页特效丨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./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./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;//标题宽度 var len=dt.length;//标题个数 var leftArray=new Array();//标题left数组 var rightArray=new Array();//标题right数组 var dlArray=new Array();//图片left数组 var drArray=new Array();//图片right数组 //元素初始化 for(i=0;i<len;i++){ $(dt[i]).css({"left":i*tw+"px","z-index":i});//标题left及z轴设置 $(dd[i]).css({"left":(i+1)*tw+"px","z-index":i});//图片left及z轴设置 $(dt[i]).attr("title",i);//标题添加title,主要解决i的闭包问题 leftArray[i]=i*tw;//计算标题的左侧left位置数组 rightArray[i]=leftArray[i]+space;//计算标题右侧的left位置数组 dlArray[i]=(i+1)*tw;//计算图片左侧left位置数组 drArray[i]=(tw*len+space)-(len-i-1)*tw;//计算图片右侧left位置数组 //加载鼠标经过事件 $(dt[i]).mouseover(function(){ mT=parseInt($(this).attr("title")); $(dt[mT]).css({"background-position":-(mT*tw)+"px -160px"}); moveAll(mT); }); //鼠标移除后改变图片背景 $(dt[i]).mouseout(function(){ $(dt[mT]).css({"background-position":-(mT*tw)+"px 0px"}); }); } //主体运动函数 function moveAll(mT){ //鼠标经过时停止全部动画,防止连续移动鼠标造成动画不连贯的问题 for(j=0;j<len;j++){ $(dt[j]).stop(); $(dd[j]).stop(); } //鼠标【当前标题】右侧的标题像右移动 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"); } //鼠标【当前标题】左侧的图标向左移动 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> 预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br> <!--把下面代码加到<body>与</body>之间--> <div class="aa"> <dl> <dt class="t1"></dt> <dd><img src="http://www./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./imagesforcode/201207/U246P704T108D47F4567DT20101119111422.jpg"></dd> <dt class="t4"></dt> <dd><img src="http://www./imagesforcode/201207/U246P704T108D47F4569DT20101119111422.jpg"></dd> <dt class="t5"></dt> <dd><img src="http://www./imagesforcode/201207/U3405P704T108D47F4570DT20101224165618.jpg"></dd> </dl> </div> </body> </html>
<br>第一次运行本代码,请刷新一下本页面先~~~<br>所需 js文件:<a href="http://www./images/jquery-1.4.min.js">jquery-1.4.min.js</a><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p>
|