js实现放大镜的效果

遇到问题不要慌

已于 2022-01-21 14:38:11 修改

阅读量100

点赞数

文章标签： javascript css css3

于 2022-01-21 14:00:44 首次发布

本文链接：https://blog.csdn.net/zuo_kaizheng/article/details/122619516

版权

实现效果

在这里插入图片描述

上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>放大镜</title>
  <link href="bigimg.css" rel="stylesheet" />
  <script src="bigimg.js"></script>
</head>
<body onload="bigimg()">
<div id="box">
  <img src="./img/img.png" alt="#">
  <div id="move"></div>
  <div id="bimg">
    <img id="b_bimg" src="./img/img.png" alt="#">
  </div>
</div>
</body>
</html>

css代码

*{
    margin:0px;
    padding:0px;
}
#box{
    width:430px;
    height:430px;
    margin:100px;
    margin-left:17%;
    position:relative;//这里使用相对定位，好让其他的元素能依靠这个元素定位
}
#box>img{
    width: 100%;
    height: 100%;
}
#move{
    /*background-image:url(./img/img_1.png);*/
    background-color: #0f4f0f;
    opacity: .3;
    width:220px;
    height:220px;
    position:absolute;
    left:0px;
    top:0px;
    display:none;//先让他隐藏，用js使其显示
}
#bimg{
    width:430px;
    height:430px;
    overflow:hidden;
    position:absolute;
    top:0px;
    left:450px;
    display:none;//先让他隐藏，用js使其显示
}
#bimg img{
    width:800px;
    height:800px;
    position:absolute;
    top:0px;
    left:0px;
}

js代码

function bigimg(){
    var bbox = document.getElementById("box");
    var bmove = document.getElementById("move");
    var bbimg = document.getElementById("bimg");
    var b_bimg = document.getElementById("b_bimg");
    bbox.onmouseover = function(){//鼠标移动到box上显示大图片和选框
        bbimg.style.display = "block";
        bmove.style.display="block";
    }
    bbox.onmouseout = function(){//鼠标移开box不显示大图片和选框
        bbimg.style.display = "none";
        bmove.style.display="none";
    }
    bbox.onmousemove = function(e){//获取鼠标位置
        var x = e.clientX;//鼠标相对于视口的位置
        var y = e.clientY;
        var t = bbox.offsetTop;//box相对于视口的位置
        var l = bbox.offsetLeft;
        var _left = x - l - bmove.offsetWidth/2;//计算move的位置
        var _top = y - t -bmove.offsetHeight/2;
        if(_top<=0)//滑到box的最顶部
            _top = 0;
        else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//滑到box的最底部
            _top = bbox.offsetHeight-bmove.offsetHeight ;
        if(_left<=0)//滑到box的最左边
            _left=0;
        else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//滑到box的最右边
            _left=bbox.offsetWidth-bmove.offsetWidth ;
        bmove.style.top = _top +"px";//设置move的位置
        bmove.style.left = _left  + "px";
        var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例
        var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
        var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
        var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
        b_bimg.style.top = -b_bimg_top + "px";//设置大图的位置信息
        b_bimg.style.left = -b_bimg_left + "px";
    }

}

项目演示地址

遇到问题不要慌

关注

0
点赞
踩
0

收藏

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

实现效果上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜</title> <link href="bigimg.css" rel="stylesheet" /> <script src="bigimg.js"></script></head><body o
复制链接

扫一扫