放大镜效果 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>放大镜效果</title>
<style type="text/css">
#div1{ width:310px; height:310px; padding:10px; border:1px solid red; position:relative;}
.smallPic{ width:310px; height:310px; position:relative; background:#ccc;}
.float_layer{ width:80px; height:80px; filter:alpha(opacity=30);opacity:0.3; position:absolute; left:0; top:0; background:red; display:none;}
.mark{ width:100%; height:100%;filter:alpha(opacity=0); opacity:0; position:absolute; left:0; top:0; z-index:2; background:red;}
.bigPic{ position:absolute; left:335px; top:0; width:400px; height:400px; overflow:hidden; display:none;}
.bigPic img{ position:absolute; left:0; top:0;}
</style>
<script type="text/javascript">
function getByClass(oParent,oClass){
    var obj=oParent.getElementsByTagName('*');
    var arr=[];
    for(var i=0;i<obj.length;i++){
        if(obj[i].className==oClass){
            arr.push(obj[i]);
        }
    }
    return arr;
}
window.onload=function(){
    //第一步当鼠标移入遮罩层时浮动的层和那个大图片显示，移出时两个都隐藏
    //第二步当鼠标再遮罩层移动时浮动快要跟着鼠标移动并且鼠标处在浮动快的中心位置
    //第三步当鼠标移动时大图也要跟随着运动
    var oParent=document.getElementById('div1'); 
    var mark=getByClass(oParent,"mark")[0];
    var float=getByClass(oParent,"float_layer")[0];
    var bigPic=getByClass(oParent,"bigPic")[0];
    var img=bigPic.getElementsByTagName('img')[0];
    var smallPic=getByClass(oParent,"smallPic")[0];
    mark.onmouseover=function(){
        float.style.display="block";
        bigPic.style.display="block";
    }
    mark.onmouseout=function(){
        float.style.display="none";
        bigPic.style.display="none";
    }
    mark.onmousemove=function(evt){
        evt=evt||event;
        //获取鼠标的位置(鼠标距页面的位置)
        var mouseLeft=evt.clientX;
        var mouseTop=evt.clientY;
        //获取鼠标的作用对象的与父元素的位置
        l=mouseLeft-oParent.offsetLeft-smallPic.offsetLeft-float.offsetWidth/2;
        t=mouseTop-oParent.offsetTop-smallPic.offsetTop-float.offsetHeight/2;
        //让浮动层不超出遮罩层的区域
        if(l<0){
            l=0;
        }else if(l>mark.offsetWidth-float.offsetWidth){
            l=mark.offsetWidth-float.offsetWidth;
        }
        if(t<0){
            t=0;
        }else if(t>mark.offsetHeight-float.offsetHeight){
            t=mark.offsetHeight-float.offsetHeight;
        }
        //然后设置浮动层的位置
        float.style.left=l+"px";
        float.style.top=t+"px";
        //设置大图的位置(根据鼠标在小图中的位置来计算百分比，通过百分比来计算大图显示的位置)
        var  perX=l/(mark.offsetWidth-float.offsetWidth);
        var perY=t/(mark.offsetHeight-float.offsetHeight);
        document.title=perX+"|"+perY;
        img.style.left=-perX*(img.offsetWidth-bigPic.offsetWidth)+"px";
        img.style.top=-perY*(img.offsetHeight-bigPic.offsetHeight)+"px";
    }
}
</script>
</head>

<body>
<div id="div1">
<div class="smallPic">
    <span class="mark"></span>
    <span class="float_layer"></span>
    <img src="http://img03.taobaocdn.com/bao/uploaded/i3/T1p_SjXcXpXXaPDL34_052713.jpg_310x310.jpg" width="310" height="310" />
</div>
<div class="bigPic">
    <img src="http://img03.taobaocdn.com/bao/uploaded/i3/T1p_SjXcXpXXaPDL34_052713.jpg" width="1000" height="1000" />
</div>
</div>
</body>
</html>
posted @ 2011-08-04 11:14  nbaTom  阅读(362)  评论(0)    收藏  举报