自己动手丰衣足食之图片放大镜

最新推荐文章于 2022-08-17 20:41:50 发布

原创最新推荐文章于 2022-08-17 20:41:50 发布 · 置顶 · 5.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#图片

web前端学习专栏收录该内容

301 篇文章

订阅专栏

本文介绍了一个简单的放大镜效果实现方案，通过HTML、CSS和JavaScript完成。利用鼠标移动事件调整小图上的透明框位置，并同步更新大图显示的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要两张图片，下载：http://download.youkuaiyun.com/detail/cometwo/9530731

这里写图片描述

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>放大镜练习</title>

        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }

            #small {
                width: 400px;
                height: 400px;
                overflow: hidden;
                margin-left: 10px;
                margin-top: 10px;
                z-index: 1;
                position: relative;
                border: 1px solid red;
            }

            #small img {
                position: absolute;
                top: 0;
                left: 0;
            }

            #float {
                display: block;
                width: 50px;
                height: 50px;
                background: green;
                opacity: 0.3;
                z-index: 2;
                position: absolute;
                display: none;
            }

            #big {
                width: 400px;
                height: 400px;
                overflow: hidden;
                margin-top: -400px;
                margin-left: 420px;
                position: relative;
                display: none;
                border: 1px solid blue;
            }

            #big img {
                position: absolute;
                left: 0;
            }
            p{
                margin-top: 10px;
                margin-left: 10px;
            }

        </style>
        <script type="text/javascript">
            window.onload = function() {
                window.onmousemove = function(e) {
                    document.getElementById('cl').innerHTML = "鼠标指针pageX,pageY坐标:" + e.pageX + "," + e.pageY;
                }
            }
        </script>
    </head>

    <body>
        <div id="small">
            <span id="float"></span>
            <img src="2.jpg">
        </div>
        <div id="big">
            <img id="no" src="1.jpg">
        </div>
        <p><span id="cl"></span></p>
        <p><span id="zb"></span></p>
        <script type="text/javascript">
            (function() {
                var oSmall = document.getElementById('small');
                var oFloat = document.getElementById('float');
                var oBig = document.getElementById('big');
                var oImg = oBig.getElementsByTagName('img')[0];
                oSmall.onmouseover = function() {
                    oBig.style.display = 'block';
                    oFloat.style.display = 'block';
                }
                oSmall.onmouseout = function() {
                    oBig.style.display = 'none';
                    oFloat.style.display = 'none';
                }
                oSmall.onmousemove = function(ev) {
                    var oEvent = ev || event;
                    /*****************/
                    var zb = document.getElementById('zb');
                    zb.innerHTML = "鼠标指针clientX,clientY的坐标:" + oEvent.clientX + "," + oEvent.clientY;
                    zb.innerHTML = zb.innerHTML + ",</br>oSmall的offsetLeft,offsetTop:" + oSmall.offsetLeft + "," + oSmall.offsetTop;
                    zb.innerHTML = zb.innerHTML + ",</br>oFloat的offsetWidth,offsetHeight:" + oFloat.offsetWidth + "," + oFloat.offsetHeight;
                    /*****************/
                    /*计算出滑块的left,top*/
                    var l = oEvent.clientX - oSmall.offsetLeft - oFloat.offsetWidth / 2;
                    var t = oEvent.clientY - oSmall.offsetTop - oFloat.offsetHeight / 2;
                    if (l < 0) {
                        l = 0
                    } else if (l > oSmall.offsetWidth - oFloat.offsetWidth) {
                        l = oSmall.offsetWidth - oFloat.offsetWidth
                    }
                    if (t < 0) {
                        t = 0
                    } else if (t > oSmall.offsetHeight - oFloat.offsetWidth) {
                        t = oSmall.offsetHeight - oFloat.offsetHeight;
                    }
                    oFloat.style.left = l + 'px';
                    oFloat.style.top = t + 'px';
                    zb.innerHTML = zb.innerHTML + "<br/>" + l + "," + t;
                    //计算出相对百分比
                    var percentX = l / (oSmall.offsetWidth - oFloat.offsetWidth);
                    var percentY = t / (oSmall.offsetHeight - oFloat.offsetHeight);
                    oImg.style.left = -percentX * (oBig.offsetWidth) + 'px';
                    oImg.style.top = -percentY * (oBig.offsetHeight) + 'px';
                }
            })();
        </script>
    </body>

</html>

拓展知识

主要使用了document对象关于窗口的一些属性,这些属性的主要功能和用法如下。

要 得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在netscape下需要使用window的属性；在ie下需 要深入document内部对body进行检测；在dom环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

window对象的innerwidth属性包含当前窗口的内部宽度。window对象的innerheight属性包含当前窗口的内部高度。

document对象的body属性对应html文档的标签。document对象的documentelement属性则表示html文档的根节点。

document.body.clientheight表示html文档所在窗口的当前高度。document.body. clientwidth表示html文档所在窗口的当前宽度。

js获取屏幕高度var s = ""; 
s += " 网页可见区域宽："+ document.body.clientwidth;
s += " 网页可见区域高："+ document.body.clientheight; 
s += " 网页可见区域宽："+ document.body.offsetwidth +" (包括边线和滚动条的宽)"; 
s += " 网页可见区域高："+ document.body.offsetheight +" (包括边线的宽)"; 
s += " 网页正文全文宽："+ document.body.scrollwidth; 
s += " 网页正文全文高："+ document.body.scrollheight; 
s += " 网页被卷去的高："+ document.body.scrolltop; 
s += " 网页被卷去的左："+ document.body.scrollleft; 
s += " 网页正文部分上："+ window.screentop; 
s += " 网页正文部分左："+ window.screenleft; 
s += " 屏幕分辨率的高："+ window.screen.height; 
s += " 屏幕分辨率的宽："+ window.screen.width; 
s += " 屏幕可用工作区高度："+ window.screen.availheight; 
s += " 屏幕可用工作区宽度："+ window.screen.availwidth; 
s += " 你的屏幕设置是 "+ window.screen.colordepth +" 位彩色"; 
s += " 你的屏幕设置 "+ window.screen.devicexdpi +" 像素/英寸";

好文要顶 关注我 收藏该文