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

<！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>"+Lnk[i].innerHTML+""; 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><IMG title="" alt="" src="http://www.jb51.net/help/downimg/1.GIF"> <IMG title="" alt="" src="http://www.jb51.net/help/downimg/1.GIF"> <IMG title="" alt="" src="http://www.jb51.net/help/downimg/1.GIF"> <IMG title="" alt="" src="http://www.jb51.net/help/downimg/1.GIF"> <IMG title="" alt="" src="http://www.jb51.net/help/downimg/1.GIF"> <IMG title="" alt="" src="http://www.jb51.net/help/downimg/1.GIF"> <SPAN id=txt style="FONT-SIZE: 14px"></SPAN><SPAN id=tit></SPAN><SPAN id=lnk></SPAN><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需刷新才能执行]

首页 / 脚本样式 / JavaScript / 图片展示效果 鼠标经过变大图，支持FF

首页 / 脚本样式 / JavaScript / 图片展示效果鼠标经过变大图，支持FF