JavaScript实现鼠标悬停显示缩略图

王朝学院·作者佚名  2009-09-15
窄屏简体版  字體: |||超大  

// JScript 文件

showPhoto =

{

containerID:'container',

init:function()

{

if(!document.getElementById||!document.createTextNode)

{return;}

//取到table标签

showPhoto.table=document.getElementsByTagName('table');

if(!showPhoto.table){return;}

//取到姓名的超链接

var namelinks=document.getElementsByTagName('a');

showPhoto.all=namelinks.length;

for(var i=0;i<showPhoto.all;i++)

{

namelinks[i].attachEvent('onmouseover',showPhoto.show);

namelinks[i].attachEvent('onmouseout',showPhoto.hide);

}

showPhoto.creatContainer();

},

show: function(e)

{

var t=window.event.srcElement;

var x=t.offsetLeft;

var y=t.parentNode.offsetTop;

//alert(x+'+'+y);

var str=new String(t);

//alert(str);

var photoURL='http://localhost:1903/List'+str.slice

(str.indexOf("~")+1,str.length);

//alert(photoURL);

showPhoto.setPic(photoURL);

showPhoto.c.style.top=y+190;

showPhoto.c.style.left=x-120;

//showPhoto.c.style.width=100;

showPhoto.c.style.position='absolute';

},

creatContainer:function()

{

showPhoto.c=document.createElement('div');

showPhoto.c.id=showPhoto.containerID;

var p=document.createElement('p');

showPhoto.c.appendChild(p)

if(!showPhoto.table[0]){return;}

showPhoto.table[0].parentNode.appendChild(showPhoto.c);

},

hide:function()

{

var p=showPhoto.c.getElementsByTagName('p')[0];

p.innerHTML='';

},

setPic:function(pic)

{

//注意此处的[0]不可丢

var picture=showPhoto.c.getElementsByTagName('p')[0];

picture.innerHTML='';

showPhoto.c.className='show';

var i=document.createElement('img');

i.setAttribute('src',pic);

if(i.width>200)

{

i.width=180

}

if(i.height>250)

{

i.height=250

}

picture.appendChild(i);

}

}

window.onload=showPhoto.init;

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航