案例：js实现放大镜

最新推荐文章于 2024-01-29 23:55:28 发布

东方求败、

最新推荐文章于 2024-01-29 23:55:28 发布

阅读量119

点赞数

分类专栏： # javascript基础 javascript复习之路文章标签： html5 javascript html

本文链接：https://blog.csdn.net/wang_swa99er/article/details/120697720

版权

javascript复习之路同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

javascript基础

77 篇文章 1 订阅

订阅专栏

案例：js实现放大镜

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #small{width: 648px;height: 972px;position: absolute;left: 100px;top: 100px;}
        #small img{width: 100%;height: 100%;}
        #mark{display: none; width: 200px;height: 200px;background-color: white; opacity: 0.5; filter: alpha(opacity=50);position: absolute;left: 0px;top: 0px;}
        #big{display: none; width: 400px; height: 400px; border: 1px solid black; left: 1000px;top: 100px; position: absolute;overflow: hidden;}
        #big img{width: 1296px;height: 1944px;position: absolute;left: 0px;top: 0px;}
    </style>
    <!-- <script src="/tool.js"></script> -->
    <script>
        window.onload = function(){
            var oSml = document.getElementById("small");
            var oBig = document.getElementById("big");
            var oMrk = document.getElementById("mark");
            var oBigImg = oBig.getElementsByTagName("img")[0];
            oSml.onmouseover = function(){
                oMrk.style.display = 'block';
                oBig.style.display = 'block';
            }

            oSml.onmouseout = function(){
                oMrk.style.display = 'none';
                oBig.style.display = 'none'
            }

            oSml.onmousemove = function(ev){
                var e = ev || window.event;
                var l = e.clientX - oSml.offsetLeft + document.documentElement.scrollLeft - 100;
                var t = e.clientY - oSml.offsetTop + document.documentElement.scrollTop - 100;
                if(l<=0){
                    l = 0;
                }
                if(t<=0){
                    t = 0;
                }
                if(l >= 448){
                    l = 448;
                }
                if(t >= 772){
                    t = 772;
                }
                oMrk.style.left = l + 'px';
                oMrk.style.top = t + 'px';

                /* 
                    右边图片的移动方式，左边遮罩层如何移动，右边图片，反方向对应倍数移动
                */
                oBigImg.style.left = l * -2 + 'px';
                oBigImg.style.top = t * -2 + 'px';
            }
        }
    </script>
</head>
<body>
    <div id = 'small'>
        <img src = "fj.jpg" alt=""/>
        <div id = 'mark'></div>
    </div>
    <div id = 'big'>
        <img src = "fj.jpg" alt=""/>
    </div>
</body>
</html>

实现效果：
在这里插入图片描述

相关知识：
物体拖拽

东方求败、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
案例：js实现放大镜

案例：js实现放大镜代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #sm
复制链接

扫一扫