摘自搜狐女人频道的图片切换的JS代码
摘自搜狐女人频道的图片切换的JS代码代码简介：
这个代码是从搜狐女人频道着页扒下来的，不知道该怎么形容它，它可以响应鼠标运作，鼠标放上去展开，移走复位，像FLASH的效果，不多说了，运行一下就可看到效果。
代码内容：
View Code<!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" lang="gb2312"><head><title>摘自搜狐女人频道的图片切换的JS代码 - www.webdm.cn</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">* { margin:0; padding:0; }body { margin:0; color:#88c; background:#333;}img { margin:0; padding:0; border:0; }#js_F { position:relative; top:10px; left:10px; overflow:hidden; width:395px; height:185px; background:#33c;}.div_img { position:absolute; top:0; width:295px; height:185px; cursor:pointer;}#div_img_0 { z-index:5; left:0; }#div_img_1 { z-index:4; left:25px; }#div_img_2 { z-index:3; left:50px; }#div_img_3 { z-index:2; left:75px; }#div_img_4 { z-index:1; left:100px; }</style></head><body><div id="js_F"> <div id="div_img_0" class="div_img"><a href="#"><img src="http://www.webdm.cn/images/20091006/a01.jpg" /></a><img src="http://www.webdm.cn/images/20091006/bg_showimg.gif" onmouseover="jsf_mmove(0)" /></div> <div id="div_img_1" class="div_img"><a href="#"><img src="http://www.webdm.cn/images/20091006/a02.jpg" /></a><img src="http://www.webdm.cn/images/20091006/bg_showimg.gif" onmouseover="jsf_mmove(1)" /></div> <div id="div_img_2" class="div_img"><a href="#"><img src="http://www.webdm.cn/images/20091006/a03.jpg" /></a><img src="http://www.webdm.cn/images/20091006/bg_showimg.gif" onmouseover="jsf_mmove(2)" /></div> <div id="div_img_3" class="div_img"><a href="#"><img src="http://www.webdm.cn/images/20091006/a04.jpg" /></a><img src="http://www.webdm.cn/images/20091006/bg_showimg.gif" onmouseover="jsf_mmove(3)" /></div> <div id="div_img_4" class="div_img"><a href="#"><img src="http://www.webdm.cn/images/20091006/a05.jpg" /></a><img src="http://www.webdm.cn/images/20091006/bg_showimg.gif" onmouseover="jsf_mmove(4)" /></div></div><script type="text/javascript"><!--///*--><!; //5个图片的初始left值var imgWidth = 270; //图片的宽度var atf = ; //5个图片的位置：true为右边，false为左边var speed1 = 10, speed2 = 2000, mo = 15; //速度var sTo;function jsf_move(n){ clearTimeout(sTo); var thisL; //图片left值 if (atf) { //要移动的图片在右边//需移动的图片（包括该图片左边的所有图片）向左边移动)for (var i=0; i<=n; i++) { //当前值-(图片宽度-(当前值-初始值))/速度 thisL = parseInt(getStyle(div_imgs,"left")); div_imgs.style.left = thisL - Math.ceil((imgWidth-(imgLeft-thisL))/mo) + "px";if (i<n) atf = false; //更改图片的位置状态} } else { //要移动的图片在左边//需移动的图片（包括该图片右边的所有图片）向右边移动)for (var i=4; i>=n; i--) { //当前值+(当前值-初始值)/速度 thisL = parseInt(getStyle(div_imgs,"left")); div_imgs.style.left = thisL + Math.ceil(Math.abs(thisL-imgLeft)/mo) + "px";if (i>n) atf = true; //更改图片的位置状态} } thisL = parseInt(getStyle(div_imgs,"left")); if ((atf&&thisL>(imgLeft-imgWidth)) || (!atf&&thisL<imgLeft)) {//当前图片移动未结束，继续移动当前图片sTo = setTimeout(function(){jsf_move(n);}, speed1); } else {//当前图片移动结束，准备移动下一张图片if (n>=3&&atf) { atf = false; sTo = setTimeout(function(){jsf_move(n);}, speed2);} else if (n==0&&!atf) { atf = true; sTo = setTimeout(function(){jsf_move(n);}, speed2);} else if (atf){ atf = false; sTo = setTimeout(function(){jsf_move(++n);}, speed2);} else { sTo = setTimeout(function(){jsf_move(--n);}, speed2);} }}//判断图片的位置function jsf_mmove(n){ clearTimeout(sTo); switch (n){ case 0 :atf = false;jsf_move(0);break; case 1 : case 2 : case 3 :if (atf) { sTo = setTimeout(function(){jsf_move(n-1);}, speed1);} else if (atf) { atf = true; sTo = setTimeout(function(){jsf_move(n-1);}, speed1);} else { sTo = setTimeout(function(){jsf_move(n);}, speed1);}break; case 4 :atf = ;jsf_move(3);break;}}window.onload = function(){ sTo = setTimeout("jsf_move(0)",speed2);}function getStyle( elem, name ) { if (elem.style) { return elem.style; } else if (elem.currentStyle) { return elem.currentStyle; } else if (document.defaultView&&document.defaultView.getComputedStyle) {name = name.replace(/()/g,"-$1");name = name.toLowerCase();var s = document.defaultView.getComputedStyle(elem,"");return s&&s.getPropertyValue(name); } else { return null; }}/*]]>*///--></script></body></html><br /><p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
复制代码 谢谢分享
页:
[1]