html、css、js实现放大镜效果

最新推荐文章于 2024-07-12 21:49:18 发布

一蓑烟雨..

最新推荐文章于 2024-07-12 21:49:18 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签： js javascript css html

本文链接：https://blog.csdn.net/weixin_44713688/article/details/107920194

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

放大镜

效果图：
【图片来自我最爱的阴阳师官网】

在这里插入图片描述

html：

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    
    <div class="demo">
        <!-- 小图 -->
        <div class="small-box">

            <!-- 放大镜 -->
            <div class="float-box"></div>
    
            <img src="../1920x1080.jpg" class='small-img'/>
            
        </div>

        <!-- 显示 -->
        <div class="big-box">
    
            <img src="../1920x1080.jpg"/>
    
        </div>
    </div>
</body>

<script src="static/index.js"></script>
</html>

css：

* {
    margin: 0 ;
    padding: 0;
}

.demo {
    display: block;
    width: 400px;
    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;
    border: 1px solid #ccc;
    opacity: 0.5;
    pointer-events: none;
}

.mark {
    position: absolute;
    display: block;
    width: 400px;
    height: 225px;
    background-color: #fff;
    opacity: 0;
    z-index: 10;
}

.small-img{
    width: 400px;
    display:block;
}


.big-box {
    display: none;
    position: absolute;
    top: 0;
    left: 460px;
    width: 400px;
    height: 300px;
    overflow: hidden;
    border: 1px solid #ccc;
    z-index: 1;
    pointer-events: none;
}

.big-box img {
    position: absolute;
    z-index: 5
}

JavaScript：


window.onload = function () {
    var objDemo = document.getElementsByClassName("demo")[0];
    var objSmallBox = document.getElementsByClassName("small-box")[0];
    var objFloatBox = document.getElementsByClassName("float-box")[0];
    var smallImg = document.getElementsByClassName("small-img")[0];
    var objBigBox = document.getElementsByClassName("big-box")[0];
    var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];

    //移入事件
    smallImg.onmouseover = function () {
        objFloatBox.style.display = "block"
        objBigBox.style.display = "block"
    }
    //移出事件
    smallImg.onmouseout = function () {
        objFloatBox.style.display = "none"
        objBigBox.style.display = "none"
    }
    //移动事件
    smallImg.onmousemove = function (ev) {
        var _event = ev || window.event;  

        /* 获取鼠标中心点*/
        var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
        var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;

       
        if (left < 0) {
            left = 0;
        } else if (left > (objSmallBox.offsetWidth - objFloatBox.offsetWidth))
        {      
         left = objSmallBox.offsetWidth - objFloatBox.offsetWidth;
        }

       
        if (top < 0) {
            top = 0;
        } else if (top > (objSmallBox.offsetHeight - objFloatBox.offsetHeight))
        {          
        top = objSmallBox.offsetHeight - objFloatBox.offsetHeight;
        }

        /* 放大镜的位置 */
        objFloatBox.style.left = left + "px"; 
        objFloatBox.style.top = top + "px";

        /* 计算百分比 */
        var percentX = left / (objSmallBox.offsetWidth - objFloatBox.offsetWidth);
        var percentY = top / (objSmallBox.offsetHeight - objFloatBox.offsetHeight);

        /* 显示图片相对应位置 */
        objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
        objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
    }
}

一蓑烟雨..

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
html、css、js实现放大镜效果

放大镜效果图：【图片来自我最爱的阴阳师官网】html：<!DOCTYPE html><html><head> <link rel="stylesheet" href="style.css"></head><body> <div class="demo">  <div class="small-box"&gt
复制链接

扫一扫

专栏目录