学电脑,学计算机 | 手机访问 | 加入收藏 | 设为首页 | RSS
当前位置:首页 > 网页制作 > Javascript教程 > 正文

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

发布时间:2009-09-14 22:34:06  来源:本站整理
【摘要】: JavaScript实现鼠标悬停显示缩略图

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

发表评论 共有条评论
验证码:
澳门网络赌场