JavaScript写放大镜效果

2022/4/18 22:13:02

编程Tag： javascript 放大镜效果 height top left display middle 400px

本文主要是介绍JavaScript写放大镜效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!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

这篇关于JavaScript写放大镜效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaScript写放大镜效果

相关编程文章