图片展示效果鼠标经过变大图，支持FF

更新时间：2009年08月21日 12:11:12 作者：

图片展示效果，鼠标经过变大图，支持FF 类似FLASH一样漂亮

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML><HEAD><TITLE>5</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META http-equiv=imagetoolbar content=no> <STYLE type=text/css>HTML { OVERFLOW: hidden } BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #000; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 815px; CURSOR: crosshair; PADDING-TOP: 0px; POSITION: absolute; HEIGHT: 230px } #box { BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BACKGROUND: #111; VISIBILITY: hidden; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid; POSITION: absolute } #screen { BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BACKGROUND: #000; LEFT: 0px; BORDER-LEFT: gray 1px solid; WIDTH: 815px; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; HEIGHT: 230px } #box IMG { BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid; POSITION: absolute } #box SPAN { FONT-WEIGHT: bold; FONT-SIZE: 12px; WIDTH: 200px; COLOR: #fff; FONT-FAMILY: verdana; POSITION: absolute } #box A { FONT-SIZE: 12px; COLOR: #ff8000; TEXT-DECORATION: none } #box A:hover { BACKGROUND: #ff8000; COLOR: #ffffff; TEXT-DECORATION: none } #box A:visited { COLOR: #ff8000; TEXT-DECORATION: none } #box A:hover:visited { BACKGROUND: #ff8000; COLOR: #ffffff; TEXT-DECORATION: none } #lnk { VISIBILITY: hidden } </STYLE> <SCRIPT type=text/javascript> document.onselectstart = new Function("return false"); O = new Array(); box = 0; img = 0; txt = 0; tit = 0; W = 0; H = 0; nI = 0; sel = 0; si = 0; ZOOM = 0; rImg = 0; ////////////////// speed = .06; // animation speed delay = .5; // 1 = no delay ////////////////// function dText(){ txt.style.textAlign = tit.style.textAlign = (sel<nI/2)?"left":"right"; txt.innerHTML = O[sel].tx; tit.innerHTML = O[sel].ti; } function CObj(n, s, x, tx, ti){ this.n = n; this.dim = s; this.tx = tx; this.ti = ti; this.is = img[n]; this.vz = 0; this.sx = 0; this.x0 = x; this.x1 = 0; this.zo = 0; this.over = function() { with(this){ if(n!=sel){ O[sel].dim = 250; O[n].dim = ZOOM * 100; sel = n; l = 0; for(k=0; k<nI; k++){ O[k].x0 = l; l += O[k].dim; } txt.innerHTML = tit.innerHTML = ""; setTimeout("dText()", 32); } } } this.anim = function () { with(this){ vz = speed*(vz+(x1-sx)*delay); x1 -= vz; sx = (n==0)?0:O[n-1].x0+O[n-1].dim; zo -= (zo-dim)*speed; l = (x1*si)+6*(n+1); w = zo*si; is.style.left = Math.round(l)+'px'; is.style.top = Math.round((H-w*rImg)*.5)+'px'; is.style.width = Math.round(w)+'px'; is.style.height = Math.round(w*rImg)+'px'; if(sel == n){ if(sel<nI*.5) { tit.style.left = txt.style.left = Math.round(l+w+6)+'px'; } else { tit.style.left = txt.style.left = Math.round(l-(nx*.25)-6)+'px'; } txt.style.top = Math.round(-(w*rImg)*.25)+'px'; tit.style.top = Math.round((w*rImg)*.33)+'px'; } } } } function run(){ for(j in O)O[j].anim(); setTimeout("run()", 16); } function doResize(){ tit.style.width = Math.round(nx*.25)+'px'; txt.style.width = Math.round(nx*.25)+'px'; tit.style.fontSize = (nx/30)+'px'; txt.style.fontSize = (nx/70)+'px'; with(box.style){ width = Math.round(W)+'px'; height = Math.round(H)+'px'; left = Math.round(nx/2-W/2)+'px'; top = Math.round(ny/2-H/2)+'px'; } } function resize(){ nx = scr.offsetWidth; ny = scr.offsetHeight; W = nx*90/100; si = (W-((nI+1)*6))/((ZOOM*180)+((nI-1)*180)); H = (100*si*rImg)+14; doResize(); } onresize = resize; onload = function(){ scr = document.getElementById("screen"); box = document.getElementById("box"); tit = document.getElementById("tit"); txt = document.getElementById("txt"); img = box.getElementsByTagName("img"); Lnk = document.getElementById("lnk").getElementsByTagName("a"); nI = img.length; ZOOM = nI; rImg = img[0].height/img[0].width; resize(); s = ZOOM * 100; x = 0; tit.innerHTML = img[0].title; txt.innerHTML = img[0].alt; for(i=0; i<nI; i++) { var t = img[i].alt; if(Lnk[i].href!="") t+='<br><a href="'+Lnk[i].href+'">'+Lnk[i].innerHTML+'</a>'; O[i] = new CObj(i, s, x, t, img[i].title); img[i].alt = ""; img[i].title = ""; img[i].onmousedown = new Function("return false;"); img[i].onmouseover = new Function('O['+i+'].over();'); if(Lnk[i].href!=""){ /* ==== hyperlink ==== */ img[i].onclick = new Function('window.open("'+Lnk[i].href+'","_blank");'); } x += s; s = 250; } box.style.visibility = "visible"; run(); } </SCRIPT> <META content="MSHTML 6.00.6000.20815" name=GENERATOR></HEAD> <BODY> <DIV id=screen> <DIV id=box><IMG title="" alt="" src="https://www.jb51.net/help/downimg/1.GIF"> <IMG title="" alt="" src="https://www.jb51.net/help/downimg/1.GIF"> <IMG title="" alt="" src="https://www.jb51.net/help/downimg/1.GIF"> <IMG title="" alt="" src="https://www.jb51.net/help/downimg/1.GIF"> <IMG title="" alt="" src="https://www.jb51.net/help/downimg/1.GIF"> <IMG title="" alt="" src="https://www.jb51.net/help/downimg/1.GIF"> <SPAN id=txt style="FONT-SIZE: 14px"></SPAN><SPAN id=tit></SPAN><SPAN id=lnk><A href=""></A><A href=""></A><A href=""></A><A href=""></A><A href=""></A><A href=""></A></SPAN></DIV></DIV><SPAN id=LB0 style="LEFT: 50%; POSITION: absolute; TOP: 50%"><SPAN style="FONT-SIZE: 10px; LEFT: -120px; COLOR: #ffffff; FONT-FAMILY: arial; POSITION: absolute; TOP: 8px">Loading...</SPAN> <SPAN style="FONT-SIZE: 1px; BACKGROUND: #333; LEFT: -120px; WIDTH: 100px; POSITION: absolute; TOP: 20px; HEIGHT: 10px"><SPAN id=LB1 style="FONT-SIZE: 1px; BACKGROUND: #ffffff; LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 10px"></SPAN></SPAN></SPAN> <SCRIPT>m00=document.getElementById("box").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</SCRIPT> </BODY></HTML>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

多图展示点击切换效果模拟的flash效果，点小图放大显示，再点恢复默认。
多图展示点击切换效果模拟的flash效果，点小图放大显示，再点恢复默认。...
2006-12-12
TFDN图片播放器不错自动播放
TFDN图片播放器不错自动播放...
2006-10-10
在页面预览客户端本地图片的js代码(兼容FF IE)
IE为了安全是不允许页面预览客户端本地图片的，也就是img元素的SRC是相对路径不可能是绝对路径的为了达成这一需求需要使用滤镜
2012-05-05
图片自动播放也可通过按钮控制显示
图片自动播放也可通过按钮控制显示...
2007-02-02
JavaScript 控制图片改变重叠顺序的代码(鼠标移动切换)
JavaScript实例，通过控制Html网页元素，来控制图片的重叠顺序，鼠标移上某一张，那一张就显示在最前面，移动到最后层，它会显示在最前，有意思吧，其实挺简单。
2010-10-10
CSS 图片横向排列实现代码
一个CSS布局实例，介绍的是一个横向排列的图片列表，这也是大家在从事网页布局时候最常见的一种布局实例，有必要掌握，本代码已经过了优化，个别细节你需根据你的网站主CSS风格进行调整，才能完美搭配。
2010-03-03
js 图片缩放（按比例）控制代码
js 图片缩放（按比例）实现代码。
2009-05-05
javascript 图片滑动切换代码
nVida网站的图片滑动特效，这里为了快速演示效果，去掉了原有的图片用数字来代替，你完全可以插入你想要的图片，本特效使用JS实现，用CSS配合固定图片，以滑动的方式切换相应的多张图片。
2010-03-03
非常不错的javascript 图片慢慢下层效果
非常不错的javascript 图片慢慢下层效果...
2007-08-08
JavaScript 类似flash效果的立体图片浏览器
这是一款比较有立体感的图片浏览器，通过图层定位技术z-index让浏览器正在查看的图片突显出来，并让两边的图片呈现半透明状态。很个性化哦！
2010-02-02