JavaScript网页特效（一）图片放大镜

浏览带有图片的购物网站时，有时鼠标放在图片上，可以放大局部看清楚图片。今天要实现的就是这个效果。

用到的事件

（1）onmouseover:鼠标指针悬浮在指定的对象时发生
（2）onmouseout:鼠标指针离开指定对象时发生
（3）onmousemove:鼠标指针移动时发生

用到的属性

offsetWidth,offsetHeight返回的是div的宽高度
offsetLeft,offsetTop返回的是div距离父容器左边和上边的高度
event.clientX,event.clientY返回事件发生时,鼠标指针相对于客户窗口的X坐标
这里注意：offsetLeft和style.left的三点区别：
（1）style.left返回的是字符串，如30px，而offsetLeft返回的是数值，如30
（2）style.left是可读写的，offsetleft是只读的。如果要修改div的位置，只能修改style.left
（3）style.left需要事先定义，否则取到的值为空（取不到css样式中定义的left）

css样式

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            display: block;
            width: 400px;
            height: 255px;
            margin: 50px;
            position: relative;
            border:1px solid #ccc;
        }
        #small-box{
            position: relative;
            z-index: 1;
        }
        #float-box{
            display: none;
            width: 160px;
            height: 120px;
            position: absolute;
            background: #ffffcc;
            opacity: 0.5;
            border:1px solid #ccc;
        }
        #mark{
            position: absolute;
            display: block;
            width: 400px;
            height: 255px;
            background: #fff;
            opacity: 0;
            z-index: 10;
        }
        #big-box{
            display: none;
            position: absolute;
            top: 0;
            left: 460px;
            width: 400px;
            height: 300px;
            overflow: hidden;
            border:1px solid #ccc;
            z-index: 1;
        }
        #big-box img{
            position: absolute;
            z-index: 5;
        }
    </style>

html代码

<div id="container">
    <div id="small-box">
        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="./images/macbook-small.jpg">
    </div>
    <div id="big-box">
        <img src="./images/macbook-big.jpg">
    </div>
</div>

js代码

<script type="text/javascript">
    window.onload = function(){
        var container = document.getElementById('container');
        var smallbox=document.getElementById('small-box');
        var floatbox=document.getElementById('float-box');
        var mark=document.getElementById('mark');
        var bigbox=document.getElementById('big-box');
        var bigboxImg=bigbox.getElementsByTagName('img')[0];
        mark.onmouseover=function (){
            floatbox.style.display = 'block';
            bigbox.style.display='block';
        }
        mark.onmouseout=function(){
            floatbox.style.display='none';
            bigbox.style.display='none';
        }
        mark.onmousemove=function(event){
            var _event = event || window.event;//兼容多个浏览器的event参数模式
            //取得放大镜距离容器smallbox左边和上边的距离
            var left = _event.clientX-container.offsetLeft-smallbox.offsetLeft-floatbox.offsetWidth/2;
            var top=_event.clientY-container.offsetTop-smallbox.offsetTop-floatbox.offsetHeight/2;
            //使放大镜不超出容器smallbox
            if (left<0) {
                left=0;
            }else if (left>(mark.offsetWidth-floatbox.offsetWidth)) {
                left=mark.offsetWidth-floatbox.offsetWidth;
            }
            if (top<0) {
                top=0;
            }else if (top>(mark.offsetHeight-floatbox.offsetHeight)) {
                top=mark.offsetHeight-floatbox.offsetHeight;
            }
            //赋值，确定放大镜的位置
            floatbox.style.left=left+"px";
            floatbox.style.top=top+"px";    
            //算出小图片和大图片的比例
            var percentX=left/(mark.offsetWidth-floatbox.offsetWidth);
            var percentY=top/(mark.offsetHeight-floatbox.offsetHeight);
            //这里加上负号是因为放大镜的移动方向和大图片的移动方向横向和纵向都是相反的
            bigboxImg.style.left=-percentX*(bigboxImg.offsetWidth-bigbox.offsetWidth)+"px";
            bigboxImg.style.top=-percentY*(bigboxImg.offsetHeight-bigbox.offsetHeight)+"px";
        }
    }

</script>

接下来要算放大镜移动时，bigbox的效果实现

//算出小图片和大图片的比例
            var percentX=left/(mark.offsetWidth-floatbox.offsetWidth);
            var percentY=top/(mark.offsetHeight-floatbox.offsetHeight);
            //这里加上负号是因为放大镜的移动方向和大图片的移动方向横向和纵向都是相反的
            bigboxImg.style.left=-percentX*(bigboxImg.offsetWidth-bigbox.offsetWidth)+"px";
            bigboxImg.style.top=-percentY*(bigboxImg.offsetHeight-bigbox.offsetHeight)+"px";
        }

最后一点注意的是，mark的遮罩层覆盖了smallbox，是因为在低版本的IE浏览器，鼠标在图片上悬浮时会出现大图的闪烁，chrome则不会。所以，加上mark解决兼容问题。