- 论坛徽章:
- 0
|
|
摘自搜狐女人频道的图片切换的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"><!--///*--><![CDATA[/*><!--*/var div_imgs = document.getElementById("js_F").getElementsByTagName("div");var imgLeft = [0, 25, 50, 75, 100]; //5个图片的初始left值var imgWidth = 270; //图片的宽度var atf = [true, true, true, true, true]; //5个图片的位置：true为右边，false为左边var speed1 = 10, speed2 = 2000, mo = 15; //速度var sTo;function jsf_move(n){ clearTimeout(sTo); var thisL; //图片left值 if (atf[n]) { //要移动的图片在右边//需移动的图片（包括该图片左边的所有图片）向左边移动)for (var i=0; i<=n; i++) { //当前值-(图片宽度-(当前值-初始值))/速度 thisL = parseInt(getStyle(div_imgs[i],"left")); div_imgs[i].style.left = thisL - Math.ceil((imgWidth-(imgLeft[i]-thisL))/mo) + "px";if (i<n) atf[i] = false; //更改图片的位置状态 } } else { //要移动的图片在左边//需移动的图片（包括该图片右边的所有图片）向右边移动)for (var i=4; i>=n; i--) { //当前值+(当前值-初始值)/速度 thisL = parseInt(getStyle(div_imgs[i],"left")); div_imgs[i].style.left = thisL + Math.ceil(Math.abs(thisL-imgLeft[i])/mo) + "px";if (i>n) atf[i] = true; //更改图片的位置状态 } } thisL = parseInt(getStyle(div_imgs[n],"left")); if ((atf[n] && thisL>(imgLeft[n]-imgWidth)) || (!atf[n] && thisL<imgLeft[n])) { //当前图片移动未结束，继续移动当前图片 sTo = setTimeout(function(){jsf_move(n);}, speed1); } else { //当前图片移动结束，准备移动下一张图片if (n>=3&& atf[n]) { atf[n] = false; sTo = setTimeout(function(){jsf_move(n);}, speed2); } else if (n==0&&!atf[n]) { atf[n] = true; sTo = setTimeout(function(){jsf_move(n);}, speed2); } else if (atf[n]){ atf[n] = 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[0] = false; jsf_move(0); break; case 1 : case 2 : case 3 : if (atf[n-1]) { sTo = setTimeout(function(){jsf_move(n-1);}, speed1); } else if (atf[n]) { atf[n-1] = true; sTo = setTimeout(function(){jsf_move(n-1);}, speed1); } else { sTo = setTimeout(function(){jsf_move(n);}, speed1); } break; case 4 : atf = [false, false, false, true, true]; jsf_move(3); break; }}window.onload = function(){ sTo = setTimeout("jsf_move(0)",speed2);}function getStyle( elem, name ) { if (elem.style[name]) { return elem.style[name]; } else if (elem.currentStyle) { return elem.currentStyle[name]; } else if (document.defaultView && document.defaultView.getComputedStyle) { name = name.replace(/([A-Z])/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>
- 复制代码
|
|
免费注册
发表于 2012-01-10 21:44
