仿淘宝 图片局部放大效果

本人前端小白一枚 做了个仿淘宝的图片放大效果与大家分享一下，还望大神批评

主要思路是 水平放两个同等大小的div用来分别盛放原图和放大后的图片。下图所示

在img1和img2中放入相同的图片，div2中使用overflow：hidden属性使多余的图片隐藏达到局部放大的效果

下面是HTML部分代码

<div id="base" style="width: 200px; height: 200px ;position: relative; float:left;">
        <img id="base_img" style="position: absolute; height: inherit;width: inherit;"  src="marta2jpg.jpg"/>
        <span id="ks_span" style="position:absolute;width: 100px;height: 100px;" class="ks_span none"></span>
    </div>
    <div id="show_contain" class="none" style="width: 200px; height: 200px ;position: relative; float:left;overflow: hidden;border: 1px solid #F0F0F0">
        <img id="show" style="position: absolute; height: 400px;width: 400px;"  src="">
    </div>

网状遮罩层的实现：利用 background-repeat: repeat;background-position: 0 0;background-image: url("back2-1.png");

把2像素*2像素的图片重复填充满span元素 将span元素背景颜色设置透明

网状层整体样式

.ks_span{
        background-attachment: scroll;
        background-repeat: repeat;
        cursor: move;
        z-index: 1;
        position: absolute;
        overflow: hidden;
        background-position: 0 0;
        background-color: transparent;
        background-image: url("back2-1.png");
    }

在div1中获取鼠标位置 根据鼠标的位置去改变img2 的top和left属性，使img2根据鼠标的移动把不同的部分显

示在div2中。

下面是获取鼠标位置的几种方法：

event对象不说了，主要写获取鼠标位置的方法：

1.event.clientX、event.clientY 获取鼠标相对于浏览器窗口可视区域（不包括工具栏和滚动条）的横纵坐标。

2.event.pageX、event.pageY 获取鼠标相对于文档也就是body的位置 event.pageX = event.clientX+横向滚动

条距离，event.pageY = event.clientY + 纵向滚动条距离。

3.event.offsetX、event.offsetY 获取鼠标相对于事件源元素的横纵坐标。

4.event.screenX、event.screenY 获取鼠标相对于屏幕边缘的横纵坐标。

我使用的是第二种pageX与pageY，

网状层与鼠标主要几个位置图：

使鼠标位于span的中心 鼠标位置与span的left和top都相差50px 所以用鼠标的坐标减去50得到span的top和left的

值但是body有默认的margin值为8px这里没有处理，所以要减去58。实现网状层跟随鼠标移动使用onmousemove

事件不停地改变span的top和left值。

接下来根据鼠标的位置得到img2的top和left值，当鼠标向下移动img2需要向上移动才能把下面的图片显示出来相同

鼠标向上移动img2需要向下移动，所以img2的top和left值需要是负值。当鼠标在12线上时span的边界已经和div1

的边界相接图片此时应该显示到边界。所以img2的top为0，此时鼠标y值为58 ，所以img2 top为58-y 然而在34线上

span下边界与div1相接所以img2的top值应为-200，此时鼠标y值为158，-200正好等于2*（58 - y），左右也是这样

分析 所以鼠标位置与img2top与left 的关系就是116-2*y和116-2*x。

当鼠标超出1234线的范围是img2和span都不需要移动了只需要用if条件限制

JavaScript代码：

<script>

    var base = document.getElementById("base");
    var show = document.getElementById("show");
    var base_img = document.getElementById("base_img");
    var show_contain = document.getElementById("show_contain");
    var sk_span = document.getElementById("ks_span");

    base.onmousemove = function (event) {

        var x = event.pageX ;
        var y = event.pageY ;
	var draw = base_img.getAttribute("src")
	show.setAttribute("src",draw);

        if (y>=58 && y<=158){
            sk_span.style.top = y-58+"px";
            show.style.top = 116-2*y + "px";
        }
        if (x>=58 && x<=158){
            sk_span.style.left = x-58+"px";
            show.style.left = 116-2*x + "px";
        }

        show_contain.classList.remove("none");
        sk_span.classList.remove("none");

    };

    base.onmouseout = function () {
        show_contain.classList.add("none");
        sk_span.classList.add("none");
		show.setAttribute("src","");
    }

</script>

以下是整体代码以及图片元素的下载地址

源码下载地址