软件开发培训班 >> 编程开发 >> JavaScript

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

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>+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> 
<DIV id=screen> 
<DIV id=box><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></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>

技术文章快速查找

JavaScript的面向对象(一)

JS代码优化技巧之通俗版(减少js体积)

jQuery 拖动层(在可视区域范围内)

node.js入门教程迷你书、node.js入门web应用开发完全示例

jquery 实现窗口的最大化不论什么情况

JQuery创建DOM元素方法解析

textarea焦点的用法实现获取焦点清空失去焦点提示效果

jquery获取div距离窗口和父级dv的距离示例

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建

软件开发培训班 >> 编程开发 >> JavaScript

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

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