五、淘宝放大镜

5.1 mouseenter事件

// 添加mouseenter事件
glass.onmouseenter = function(){
    console.log("进入镜片了");
}

box.onmouseenter = function(){
    console.log("进入图片了")
}

// 当绑定的是mouseenter事件，当鼠标不断在镜片来回进入的时候，只会触发镜片事件

5.2 mouseover事件

// 添加mouseover事件
glass.onmouseover = function(){
    console.log("进入镜片了");
}

box.onmouseover = function(){
    console.log("进入图片了")
}

// 当绑定的是mouseover事件，当鼠标不断在镜片来回进入的时候，同时触发镜片和图片事件

5.3 mouseleave事件

// 添加mouseleave事件
glass.onmouseleave = function(){
    console.log("进入镜片了");
}

box.onmouseleave = function(){
    console.log("进入图片了")
}
// 当绑定的是mouseleave事件，当鼠标不断在镜片来回进入的时候，只会触发镜片事件

5.4 淘宝放大镜 鼠标移入放大图片，离开缩小

5.4.1 dom结构

<div id="box">
    <div id="glass"></div>
</div>
<div id="box1"></div>

5.4.2 样式

#box {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 200px;
    left: 100px;
    border: 1px solid red;
    background-image: url(images/small.jpg);
    background-size: cover;
}
#glass {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 255, .5);
    left: 0;
    top: 0;
    display: none;
}
#box1 {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 200px;
    left: 550px;
    background-image: url(images/big.jpg);
    border: 1px solid red;
    display: none;
}

5.4.3 执行代码

<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/offset.js"></script>
<script>
    // 获取元素
    var box = document.getElementById("box");
    var glass = document.getElementById("glass");
    var box1 = document.getElementById("box1");

    // 当鼠标进入box中，让glass和box1出现
    box.onmouseenter = function(){
        glass.style.display = "block";
        box1.style.display = "block";
    }

    // 当鼠标离开box时，让glass和box1消失
    box.onmouseleave = function(){
        glass.style.display = "none";
        box1.style.display = "none";
    }

    // 获取box到页面的距离
    var result = offset(box);
    // console.log(result);
    var box_x = result.left;
    var box_y = result.top;

    // 给box添加mousemove事件，让glass跟随鼠标移动
    box.onmousemove = function(e){
        // 获取鼠标到页面的距离
        var m_x = e.pageX;
        var m_y = e.pageY;

        // 定义变量简化书写
        // 鼠标的位置 = 鼠标位于页面中的位置 - 盒子位于页面中的位置
        var x = m_x - box_x;
        var y = m_y -box_y;

        var resultX = x - glass.clientWidth / 2;
        var resultY = y - glass.clientHeight / 2;
        
        // 进行边界限制
        if (resultX < 0){
            resultX = 0;
        } else if (resultX > box.clientWidth - glass.clientWidth){
            resultX = box.clientWidth - glass.clientWidth;
        }
        if (resultY < 0){
            resultY = 0;
        } else if (resultY > box.clientHeight - glass.clientHeight){
            resultY = box.clientHeight - glass.clientHeight;
        }

        // 将x y赋值给glass
        glass.style.left = resultX + "px";
        glass.style.top = resultY + "px";

        // 改变box1的背景图片定位 x 和 y 方向数值之间有空格
        box1.style.backgroundPosition = - 2 * resultX + "px " + - 2 * resultY + "px";

    }
</script>

5.4.4 输出结果

5.5 兼容IE

• IE8 不支持background-size

  • 直接在box中插入img

  • 并设置img width：100%； height：100%;

• IE8不支持rgba()设置透明度

  • 需要使用filter: alpha(opacity=50);来设置

  • 高级浏览器不支持filter: alpha(opacity=50); 静默不处理，执行下一条语句

• IE8不支持pageX pageY

  • 实际使用时，clientX可替代pageX

  • pageY用clientY + document.documentElement.scrollTop; 来替代

<div id="box">
    <img src="images/small.jpg" alt="">
    <div id="glass"></div>
</div>
<div id="box1"></div>

#box {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 200px;
    left: 100px;
    border: 1px solid red;
    /* background-image: url(images/small.jpg);
    background-size: cover;   IE8 不支持background-size*/
}
img {
    width: 100%;
    height: 100%;
}
#glass {
    position: absolute;
    width: 200px;
    height: 200px;
     /* IE8不支持rgba() */
    background-color: rgb(0, 0, 255);
    /* 高级浏览器不认识filter 静默不处理 执行下一条语句 */
    filter: alpha(opacity=50);
    background-color: rgba(0, 0, 255, .5);  
    left: 0;
    top: 0;
    display: none;
}

// 兼容IE8
var e = e || window.event;
// 获取鼠标到页面的距离
var m_x = e.clientX;
var m_y = e.clientY + document.documentElement.scrollTop;