仿京东放大镜案例

最新推荐文章于 2022-09-12 14:37:06 发布

旺仔奶牛

最新推荐文章于 2022-09-12 14:37:06 发布

阅读量138

点赞数

文章标签： css js html

本文链接：https://blog.csdn.net/LIKD_DIKL/article/details/111168043

版权

仿京东放大镜案例

<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
        body,
        div {
            margin: 0;
            padding: 0;
        }

        #zhuti {
            margin: 50px;
            position: relative;
        }

        #small {
            width:220px;
            height: 200px;
            border: 1px solid #000;
        }
        #small img{
            width: 220px;
            height: 200px;
        }

        #big {
            border: 1px solid #666;
            overflow: hidden;
            width: 360px;
            height: 210px;
            position: absolute;
            left: 310px;
            top: 0px;
            display: none;
            /*默认隐藏*/
        }

        #jingtou {
            width: 50px;
            height: 50px;
            background: #666;
            opacity: 0.4;
            position: absolute;
            display: none;
            /*默认隐藏*/
        }

        #big img {
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="zhuti">
        <div id="small">
            <div id="jingtou"></div>
            <img src="img/01.jpg">
        </div>
        <div id="big">
            <img src="img/01.jpg" id="bigimg">
        </div>
    </div>
    <script type="text/javascript">
        //封装一个函数(id形式参数)
        function $(id) {
            return document.getElementById(id);
        }
        var small = $('small');
        var big = $('big');
        var jingtou = $('jingtou');
        var zhuti = $('zhuti');
        var bigimg = $('bigimg');
        //监视鼠标(镜头)
        small.onmouseover = function () {
            big.style.display = 'block';
            jingtou.style.display = 'block';
        }
        small.onmouseout = function () {
            big.style.display = 'none';
            jingtou.style.display = 'none';
        }
        //挡鼠板移动的时候
        small.onmousemove = function (event) {
            //获得当前坐标 //减去镜头宽度的一半
            var left = event.clientX - zhuti.offsetLeft - jingtou.offsetWidth / 2;
            var top = event.clientY - zhuti.offsetTop - jingtou.offsetHeight / 2;
            //进行判断语句（固定0的位置）
            //向左走
            if (left <= 0) {
                left = 0;
            }
            //向上走
            if (top <= 0) {
                top = 0;
            }
            //向右走
            if (left >= small.offsetWidth - jingtou.offsetWidth) {
                left = small.offsetWidth - jingtou.offsetWidth;
            }
            //向下走
            if (top >= small.offsetHeight - jingtou.offsetHeight) {
                top = small.offsetHeight - jingtou.offsetHeight;
            }
            //小图的比例
            var smallX = left / (small.offsetWidth - jingtou.offsetWidth);
            //var smallX = left / (small.offsetWidth - jingtou.offsetWidth);
            var smallY = top / (small.offsetHeight - jingtou.offsetHeight);
            //var smallY = top / (small.offsetHeight - jingtou.offsetHeight);
            var bigX = -smallX * (bigimg.offsetWidth - big.offsetWidth);
            var bigY = -smallY * (bigimg.offsetHeight - big.offsetHeight);
            //求a和b的值
            bigimg.style.left = bigX + 'px';
            bigimg.style.top = bigY + 'px';
            //镜头距离左边的位置==鼠标距离左边的位置
            jingtou.style.left = left + 'px';
            jingtou.style.top = top + 'px';
        }
    </script>
</body>

</html>

在这里插入图片描述

旺仔奶牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿京东放大镜案例

仿京东放大镜案例<html><head> <meta charset="utf-8"> <style type="text/css"> body, div { margin: 0; padding: 0; } #zhuti { margin: 50px; position: re
复制链接

扫一扫