木小乐

鼠标划过小图片显示大图片特效

原代码效果：
http://bbs.blueidea.com/viewthread.php?tid=2949537&page=1#pid4706837
看了之后有一处代码并不了明白。于是自己写了自己版本的。效果吗。马马虎虎。浏览器还没发现BUG



我写的JS如下：如有错误，请大家指正：

copycode:
var Stri={
photo:function(Si,Samp){
var si=document.getElementById(Si),samp=si.getElementsByTagName(Samp),len=samp.length,overLayer=null,oself=this;
for(var i=0;i<len;i++){

samp[i].onmouseover=function(){

var path=this.parentNode.href;
var img_box="<img src="+path+">";
var loading_img='<img src="http://www.14pc.com/imageStyle/ajax-loader.gif" class="loading"　alt="正在加载">';
var pageX=oself.getX(this),pageY=oself.getY(this);
if(!overLayer){
overLayer=document.createElement("div");
overLayer.id="overlayer";
document.body.appendChild(overLayer);
}
else{
overLayer.style.display="block";
}
//隐藏层的位置
var w=overLayer.offsetWidth;
var w0=this.offsetWidth;
var h=overLayer.offsetHeight;
var h0=this.offsetHeight;


if((pageX+5+w+w0)>(oself.getCX()+oself.getSX()))
{overLayer.style.left=pageX-(5+w)+"px";}
else{
overLayer.style.left=pageX+5+w0+"px";
}
if((pageY+5+h+h0)>(oself.getCY()+oself.getSY()))
{
overLayer.style.top=pageY-(5+h)+h0+"px";}
else{
overLayer.style.top=pageY+5+"px";}
overLayer.innerHTML=loading_img;
setTimeout(function(){overLayer.innerHTML=img_box},900);
}//onmouseover->>
samp[i].onmouseout=function(){
overLayer.innerHTML="";
overLayer.style.display="none";
}

}},
getX:function(r){
var left=0,box=null;
if(r.getBoundingClientRect){
box=r.getBoundingClientRect();
left=box.left+Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
}
return left;
},
getY:function(r){
var top=0,box=null;
if(r.getBoundingClientRect){
box=r.getBoundingClientRect();
top=box.top+Math.max(document.documentElement.scrollTop,document.body.scrollTop);
}
return top;},

getCX:function(){
return document.documentElement.clientWidth || document.body.clientWidth;},
getSX:function(){
return document.documentElement.scrollLeft ||document.body.scrollLeft;},
getCY:function(){
return document.documentElement.clientHeight || document.body.clientHeight;},
getSY:function(){
return document.documentElement.scrollTop || document.body.scrollTop;}

};

推荐阅读getBoundingClientRect()

posted on 2009-09-18 22:39  stri  阅读(147)  评论(0)    收藏  举报

导航