首頁 >web前端 >js教程 >图片展示效果鼠标经过变大图，支持FF_图象特效

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

WBOY原創: 2016-05-16 18:47:37794瀏覽

<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>

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

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

看更多

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

相關文章

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