鼠标悬停放大效果-优快云博客

今天来记录一个在很多电商网站上都能看到的效果就是鼠标滑过小图片的局部在右侧能够对应的显示大图。

首先是基本的html布局：这里因为css样式不是很多，我就直接放到一块了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            margin: 100px;
            position: relative;

        }

        #mask {
            width: 100px;
            height: 100px;
            background-color: orange;
            opacity: 0.3;
            position: absolute;
            left: 0px;
            top: 0px;
            display: none;
        }

        #smallBox {
            width: 350px;
            height: 350px;
            position: absolute;
            border: 1px solid #d0d0d0;

        }

        #bigBox {
            width: 400px;
            height: 400px;
            overflow: hidden;
            border: 1px solid #ddd;
            position: absolute;
            left: 350px;
            top: 0;
            display: none;
        }

        #bigBox img{
            position: absolute;
        }

    </style>
</head>
<body>
<div id="box">
    <div id="smallBox">
        <img src="images/001.jpg" alt="" width="350" id="smallImg">
        <span id="mask"></span>
    </div>
    <div id="bigBox">
        <img src="images/0001.jpg" alt="" width="800" id="bigImg">
    </div>

</div>
<script src="demo.js"></script>
</body>
</html>

效果入下图所示：

这里写图片描述

接下来就是最重要的javascript了：

var box = document.getElementById("box");
var smallBox = document.getElementById("smallBox");
var smallImg = document.getElementById("smallImg");
var bigImg = document.getElementById("bigImg");
var bigBox = document.getElementById("bigBox");
var mask = document.getElementById("mask");

smallBox.onmouseover = function(){
    bigBox.style.display = "block";
    mask.style.display = "block";
}

smallBox.onmouseout = function(){
    bigBox.style.display = "none";
    mask.style.display = "none";
}


document.onmousemove = function (event) {
    var event = event || window.event;
    //获取鼠标手移动到的x轴，y轴位置
    var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
    var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;

    var boxX = pageX - box.offsetLeft;
    var boxY = pageY - box.offsetTop;

    //为了能以中心点移动，向左挪动遮罩层宽度的一半
    var targetX = boxX - mask.offsetWidth / 2;
    var targetY = boxY - mask.offsetHeight / 2;

    if (targetX < 0) {
        targetX = 0;
    }

    if (targetX > smallBox.offsetWidth - mask.offsetWidth) {
        targetX = smallBox.offsetWidth - mask.offsetWidth;
    }

    if(targetY < 0){
        targetY = 0;
    }

    if(targetY > smallBox.offsetHeight - mask.offsetHeight){
        targetY = smallBox.offsetHeight - mask.offsetHeight;
    }

    mask.style.left = targetX + "px";
    mask.style.top = targetY + "px";

    //按比例显示右侧图片
    //小遮罩层／小图片可移动范围 ＝ 大遮罩层／大图片可移动范围
    var smallMove = smallImg.offsetWidth - mask.offsetWidth;
    var bigMove = bigImg.offsetWidth - bigBox.offsetWidth;
    var rate = bigMove/smallMove;
    var bigtargetX = -rate*targetX;
    var bigtargetY = -rate*targetY;

    bigImg.style.left = bigtargetX + "px";
    bigImg.style.top = bigtargetY + "px";
}