Heim >Web-Frontend >js-Tutorial >图片展示效果鼠标经过变大图，支持FF_图象特效

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

WBOYOriginal: 2016-05-16 18:47:37794Durchsuche

<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+''; 
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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

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

In Verbindung stehende Artikel

Mehr sehen

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

In Verbindung stehende Artikel

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