js 放大镜效果

2016-12-06 本文已影响0人教我情何以堪

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="description" content="" />
<title></title>
<style>
*{ margin:0; padding:0;}

box{ position:relative; left:100px; top:100px;}

small{ width:300px; height:193px; position:relative; overflow:hidden;}

small img{ display:block; width:300px; position:absolute;}

small .float{ width:100px; height:100px; background:#f00; position:absolute; z-index:2; display:inline-block; opacity:0.5; filter:alpha(opacity:50) cursor:move; display:none;}

big{ width:300px; height:300px; position:absolute; display:none; left:320px; top:0; overflow:hidden;}

big img{ position:absolute; left:0; top:0;}

</style>
<script>
window.onload=function(){
var oSmall=document.getElementById('small');
var oBig=document.getElementById('big');
var oImg=oBig.children[0];
var oBox=document.getElementById('box');
var oFloat=oSmall.children[0];

    oSmall.onmouseenter=function(){
        oFloat.style.display='block';
        oBig.style.display='block';
    };
    oSmall.onmouseleave=function(){
        oFloat.style.display='none';
        oBig.style.display='none';
    };

    oSmall.onmousemove=function(ev){
        var oEvent=ev || event;
        var left=oEvent.clientX-oBox.offsetLeft-oFloat.offsetWidth/2;
        var top=oEvent.clientY-oBox.offsetTop-oFloat.offsetHeight/2;

        left<0 && (left=0);

        if(left>oSmall.offsetWidth-oFloat.offsetWidth){
            left=oSmall.offsetWidth-oFloat.offsetWidth;
        }

        top<0 && (top=0);
        if(top>oSmall.offsetHeight-oFloat.offsetHeight){
            top=oSmall.offsetHeight-oFloat.offsetHeight;
        }

        oFloat.style.left=left+'px';
        oFloat.style.top=top+'px';

        //放大镜
        /*
        *
        * 小图比例=大图比例
        *
        * 小图比例=left/(oSmall.offsetWidth-oFloat.offsetWidth)
        * 大图比例=?/(oImg.offsetWidth-oBig.offsetWidth)
        *
        * left/(oSmall.offsetWidth-oFloat.offsetWidth)=?/(oImg.offsetWidth-oBig.offsetWidth)
        *
        * ?=left/(oSmall.offsetWidth-oFloat.offsetWidth)*(oImg.offsetWidth-oBig.offsetWidth)
        *
        * */
        oImg.style.left=-left/(oSmall.offsetWidth-oFloat.offsetWidth)*(oImg.offsetWidth-oBig.offsetWidth)+'px';
        oImg.style.top=-top/(oSmall.offsetHeight-oFloat.offsetHeight)*(oImg.offsetHeight-oBig.offsetHeight)+'px';

    };
};

</script>
</head>