JavaScript写放大镜效果

2022-04-18 20:00:37 阅读：169 来源： 互联网

标签：效果放大镜 top JavaScript height middle 400px display left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #middle {
            width: 400px;
            height: 400px;
            position: absolute;
            top : 50px;
            left : 100px;
            border: 1px solid;
        }
 
        #middle img {
            width: 400px;
            height: 400px;
        }
 
        #len {
            width: 200px;
            height: 200px;
            background: #f00;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.5;
            display: none;
        }
 
        #big {
            width: 400px;
            height: 400px;
            position: absolute;
            top : 50px;
            left : 520px;
            border:1px solid;
            overflow: hidden;
            display: none;
        }
        #big img {
            width: 800px;
            height: 800px;
            position: absolute;
            top : 0;
            left : 0;
        }
    </style>
</head>
<body>
    <div id="middle">
        <img src="images/middle.jpg">
        <div id="len"></div>
    </div>
 
    <div id="big">
        <img src="images/big.jpg" id="big_img">
    </div>
 
    <script src="js/tools.js"></script>
    <script>
        /* 鼠标移入/移出 div#middle */
        $("#middle").onmouseenter = function(){
            $("#len").style.display = "block";
            $("#big").style.display = "block";
        }
        $("#middle").onmouseleave = function(){
            $("#len").style.display = "none";
            $("#big").style.display = "none";
        }
 
        // 求 div#middle 元素在文档中定位
        var middleOffset = offset($("#middle"));
 
        /* 鼠标在 div#middle 上移动 */
        $("#middle").onmousemove = function(e){
            // 镜头坐标
            var _top = e.pageY - middleOffset.top - 100,
                _left = e.pageX - middleOffset.left - 100;
            // 判断镜头是否在div#middle中图范围内移动
            if (_top < 0)
                _top = 0;
            else if (_top > 200)
                _top = 200;
            if (_left < 0)
                _left = 0;
            else if (_left > 200)
                _left = 200;

更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118599333

标签：效果,放大镜,top,JavaScript,height,middle,400px,display,left
来源： https://www.cnblogs.com/wangchuanxinshi/p/16161864.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript写放大镜效果