开发学院网页设计 JavaScript JavaScript实现鼠标悬停显示缩略图阅读

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

　2009-09-14 20:13:03　来源：WEB开发网　闂傚倸鍊风欢姘缚瑜嶈灋闁圭虎鍠栫粻顖炴煥閻曞倹瀚�

闂傚倸鍊风粈渚€骞夐敓鐘插瀭闁汇垹鐏氬畷鏌ユ煙閹殿喖顣奸柛搴＄У閵囧嫰骞掗幋婵冨亾閻㈢ǹ纾婚柟鐐灱濡插牊绻涢崱妤冃℃繛宀婁簽缁辨捇宕掑鎵佹瀸闂佺懓鍤栭幏锟�

濠电姷鏁告慨顓㈠箯閸愵喖宸濇い鎾寸箘閹规洟姊绘笟鈧ḿ褍煤閵堝悿娲Ω閳轰胶鍔﹀銈嗗笂閼冲爼鍩婇弴銏＄厪闁搞儮鏅涙禒褏绱掓潏鈺佷槐闁轰焦鎹囬弫鎾绘晸閿燂拷闂傚倸鍊风欢姘缚瑜嶈灋闁圭虎鍠栫粻顖炴煥閻曞倹瀚�　　闂傚倸鍊烽懗鑸电仚缂備胶绮〃鍛村煝瀹ュ鍗抽柕蹇曞У閻庮剟姊虹紒妯哄闁诲繑姘ㄩ埀顒佸嚬閸撶喎顫忓ú顏勫瀭妞ゆ洖鎳庨崜浼存⒑闁偛鑻晶顔剧磼婢跺﹦绉虹€殿喖顭锋俊姝岊槷闁稿鎹囧Λ鍐ㄢ槈濞嗗繑娈橀梻浣风串缂嶁偓濞存粠鍓熼崺鈧い鎺戝€归弳顒勬煕鐎ｎ亷韬€规洑鍗冲鍊燁槾闁哄棴绠撻弻銊╂偆閸屾稑顏�

核心提示：// JScript 文件 showPhoto = { containerID:'container', init:function() { if(!document.getElementById||!document.createTextNode) {return;} //取到table

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