demo之放大镜

最新推荐文章于 2025-11-23 21:04:38 发布

原创最新推荐文章于 2025-11-23 21:04:38 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

该文章提供了一个使用HTML、CSS和JavaScript实现的图片放大镜效果的代码示例。当鼠标移到小图片上时，会出现一个黄色的选区框，选区内容会以2.4倍的比例在图片右侧实时放大显示。代码主要涉及鼠标事件处理和元素定位调整。

需求：
1.鼠标移至图片上方，鼠标周围出现黄色的的正方形框，黄色矩形框会随着鼠标的移动而移动；
2.将黄色正方形框里的内容的长和宽均放大2.4倍，并在图片右边进行显示。

原理：

html部分：让两张图片相同大小同一行显示
在这里插入图片描述
css样式部分：设置大小，定位，颜色

js部分：对小图片盒子添加鼠标事件，鼠标在时显示放大图和阴影。计算阴影和大图的定位实现实时移动放大。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            overflow: hidden;
        }
        .smallimg{
            position: relative;
            width: 200px;
            height: 200px;
            float: left;
        }
        .smallimg img{
            width: 100%;
            height: 100%;
        }
        .smallimg span{
            position: absolute;
            width: 70px;
            height: 70px;
            background-color: yellow;
            opacity: .3;
            left: 0;
            top: 0;
            display: none;
        }
        .bigimg{
            width: 200px;
            height: 200px;
            float: left;
            margin-left:10px ;
            overflow: hidden;
            display: none;
            position: relative;
        }
        .bigimg img{
            width: 480px;
            height: 480px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="smallimg" id="simg">
            <img id="simg" src="./img/1.jpg" alt="">
            <span id="yy"></span>
        </div>
        <div class="bigimg" id="bimg">
            <img id="b-img" src="./img/1.jpg" alt="">
        </div>
    </div>

  <script>
    var simg=document.getElementById("simg");
    var yy=document.getElementById("yy");
    var bimg=document.getElementById("bimg");
    var bigimg=document.getElementById("b-img")
    simg.onmouseover=function(){
        yy.style.display="block";
        bimg.style.display="block";
    }
    simg.onmouseleave=function(){
        yy.style.display="none";
        bimg.style.display="none";
    }
    simg.onmousemove=function(e){
        var x =e.clientX-yy.offsetWidth/2; 
        var y =e.clientY-yy.offsetHeight/2;
        if(x<0){
           x=0;
        }else if(x>simg.offsetWidth-yy.offsetWidth){
            x=simg.offsetWidth-yy.offsetWidth
        }
        if(y<0){
            y=0
        }else if(y>simg.offsetHeight-yy.offsetHeight){
            y=simg.offsetHeight-yy.offsetHeight
        }
        yy.style.left=x+"px";
        yy.style.top=y+"px";
        bigimg.style.left=-x*2.4+"px";
        bigimg.style.top=-y*2.4+"px";
    }
  </script>
</body>
</html>