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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 图片展示效果鼠标经过变大图，支持FF

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 281 ::

收藏到网摘: n/a

JS 控制CSS样式表可拖动可改变大小div的实现代码

图片展示效果，鼠标经过变大图，支持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>
<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 CObj(n, s, x, tx, ti){
this.n = n;
this.dim = s;
this.tx = tx;
this.ti = ti;
this.is = img[n];
this.vz = 0;
this.sx = 0;
this.x0 = x;
this.x1 = 0;
this.zo = 0;
this.over = function() {
with(this){
if(n!=sel){
O[sel].dim = 250;
O[n].dim = ZOOM * 100;
sel = n;
l = 0;
for(k=0; k<nI; k++){
O[k].x0 = l;
l += O[k].dim;
}
txt.innerHTML = tit.innerHTML = "";
setTimeout("dText()", 32);
}
}
}
this.anim = function () {
with(this){
vz = speed*(vz+(x1-sx)*delay);
x1 -= vz;
sx = (n==0)?0:O[n-1].x0+O[n-1].dim;
zo -= (zo-dim)*speed;
l = (x1*si)+6*(n+1);
w = zo*si;
is.style.left = Math.round(l)+'px';
is.style.top = Math.round((H-w*rImg)*.5)+'px';
is.style.width = Math.round(w)+'px';
is.style.height = Math.round(w*rImg)+'px';
if(sel == n){
if(sel<nI*.5) {
tit.style.left = txt.style.left = Math.round(l+w+6)+'px';
} else {
tit.style.left = txt.style.left = Math.round(l-(nx*.25)-6)+'px';
}
txt.style.top = Math.round(-(w*rImg)*.25)+'px';
tit.style.top = Math.round((w*rImg)*.33)+'px';
}
}
}
}
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="/upload/tech/20091012/20091012100441_f57a2f557b098c43f11ab969efe1504b.gif"> <IMG title="" alt=""
src="/upload/tech/20091012/20091012100441_f57a2f557b098c43f11ab969efe1504b.gif"> <IMG title="" alt="" src="/upload/tech/20091012/20091012100441_f57a2f557b098c43f11ab969efe1504b.gif">
<IMG title="" alt="" src="/upload/tech/20091012/20091012100441_f57a2f557b098c43f11ab969efe1504b.gif"> <IMG title="" alt=""
src="/upload/tech/20091012/20091012100441_f57a2f557b098c43f11ab969efe1504b.gif"> <IMG title="" alt="" src="/upload/tech/20091012/20091012100441_f57a2f557b098c43f11ab969efe1504b.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 控制CSS样式表可拖动可改变大小div的实现代码

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

评论 (0) All

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