放大镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1200px;
            margin: 50px auto;
        }
        .left{
            width: 400px;
            height: 400px;
            position: relative;
            float: left;
        }
        .left img{
            width: 400px;
            height: 400px;
        }
        .shadow{
            width: 100px;
            height: 100px;
            background-color: rgba(0,0,0,.5);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        .right {
            width: 300px;
            height: 300px;
            float: left;
            margin-left: 40px;
            display: none;
            position: relative;
            overflow: hidden;
        }
        .right img{
            width: 1200px;
            height: 1200px;
            position: absolute;
            left: 0;
            top: 0;
        }
        ul{
            display: flex;
            list-style: none;
        }
        ul img{
            width: 80px;
            height: 80px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            <img src="../images/1.jpg" alt="">
            <div class="shadow"></div>
        </div>
        <div class="right">
            <img src="../images/1.jpg" alt="">
        </div>

        <div style="clear: both;"></div>
        <ul>
            <li>
                <img src="../images/1.jpg" data-small="../images/11.jpg" alt="">
            </li>
            <li>
                <img src="../images/2.jpg" data-small="../images/2.jpg" alt="">
            </li>
             <li>
                <img src="../images/3.jpg" data-small="../images/3.jpg"  alt="">
            </li>
            <li>
                <img src="../images/4.jpg" data-small="../images/4.jpg"  alt="">
            </li>
        </ul>
    </div>


    <script>
        // css结构
            // 左边大盒子 图片   遮罩层 
            // 右边显示的小盒子   大图

            // 两边的图片时等比例的
            // 遮罩层的大小和右边显示区的大小是同比例的
        
            // 遮罩层大图显示区的比例 = 左边图和右边大图的比例

        // 实现？
            // 左边鼠标跟随

                // cssText会覆盖行内样式
                // display:none   获取不到样式

            // 大图和遮罩层走的方向是相反的 ！！！！！！

                // 大图的移动比例 = 大图的移动范围 / 遮罩层的移动范围

               




        var oShadow = document.querySelector('.shadow') ;
        var oLeft = document.querySelector('.left') ;
        var oRight = document.querySelector('.right') ;
        var oBox = document.querySelector('.box');
        var oBigImg = document.querySelector('.right img') ;

        // oShadow  display:none   因此元素的css获取不到
        // var r = oShadow.offsetWidth / 2;

        oLeft.addEventListener('mouseover' , function(){
            oShadow.style.display = 'block' ;
            oRight.style.display = 'block' ;
            var r = oShadow.offsetWidth / 2;
            var maxLeft = oLeft.clientWidth - oShadow.offsetWidth ;
            var maxTop = oLeft.clientHeight - oShadow.offsetHeight ;
            document.onmousemove = function(e){
                var e = event || e ; 
                var left = e.x - oBox.offsetLeft - r ;
                var top = e.y - oBox.offsetTop - r ;
                if(left < 0) {
                    left = 0
                }
                if(top < 0) {
                    top = 0 ;
                }
                if(left > maxLeft) {
                    left = maxLeft
                }
                if(top > maxTop) {
                    top = maxTop
                }
                // oShadow.style.cssText = `display:block;left:${left}px;top:${top}px` ;
                oShadow.style.left = left + 'px' ;
                oShadow.style.top = top + 'px' ;


                // 大图的宽度
                var bigW = parseInt(getStyle(oBigImg , 'width')) ;
                // 大图显示区的宽度
                var bigSHowW = parseInt(getStyle(oRight , 'width')) ;

                // 左边图的宽度
                var leftW = parseInt(getStyle(oLeft , 'width'))
                // 左边遮罩层的宽度
                var oShadowW = parseInt(getStyle(oShadow , 'width'))
                var scale = (bigW - bigSHowW) / (leftW - oShadowW) ;
                oBigImg.style.left = -left * scale + 'px' ;
                oBigImg.style.top = -top * scale + 'px' ;
            }
            
        })


        oLeft.addEventListener('mouseout' , function() {
            oShadow.style.display = 'none';
            document.onmousemove = null ;
        })



        // 切换图片
            // 换路径  
        var oUl = document.querySelector('ul') ;
        var oLeftImg = document.querySelector('.left img') ;
        oUl.addEventListener('mouseover' , function(e) {
            var e = event || e ; 
            var target = e.target ;
            if(target.tagName === 'IMG') {
                var src = target.getAttribute('data-small');
                console.log(src);
                oLeftImg.src = src ;
                oBigImg.src = src ;
            }
        })



        function getStyle(ele , property) {
            if(window.getComputedStyle) {
                return getComputedStyle(ele)[property]
            }
            return ele.currentStyle(property)
        }


        
    </script>
</body>
</html>
posted @   干饭吧  阅读(24)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示