图片展示效果鼠标经过变大图，支持FF_图象特效

php中文网

发布时间：2016-05-16 18:47:37

836人浏览过

来源于php中文网

原创

<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 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+''; 
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">
<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="max-width:90%"></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>

什么是javascript的静态类型检查_为什么TypeScript能增强类型安全

如何理解javascript的垃圾回收机制_为什么闭包会影响垃圾回收

javascript中的标签模板字面量是什么_它有什么高级用法

什么是javascript中的混入模式？_它如何实现多继承类似的功能？

什么是JavaScript装饰器_它如何扩展类和函数功能

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：JS去除字符串的空格增强版(可以去除中间的空格)_javascript技巧下一篇：jQuery ui1.7 dialog只能弹出一次问题_jquery

热门AI工具