首页 > 网络编程 > JavaScript > 网页特效 > 图象特效 > 鼠标经过变大图

图片展示效果鼠标经过变大图，支持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>

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 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需刷新才能执行]

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

您可能感兴趣的文章:

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