JQuery放大镜

最新推荐文章于 2023-01-14 21:47:59 发布

weixin_33979745

最新推荐文章于 2023-01-14 21:47:59 发布

阅读量160

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/parchments/blog/3011548

版权

2019独角兽企业重金招聘Python工程师标准>>>

放大镜效果

所谓的放大镜效果其实是由两张图片来完成的,一张小图片一张大图片,

鼠标放在小图片上移动,从而控制大图片来移动,给人一张图片被放大的错觉.上面是效果图:

一、原生js写法

(1)html

<body>
    <div class="min">
        <img src="img/max2.jpg" alt="" />
        <div class="fd"></div>
    </div>
    <div class="max">
        <img src="img/mmax2.jpg"/>
    </div>
</body>

min放小图片,max放大图片,enlarge是浅蓝色的放大镜;

(2)css

<style type="text/css">
    .min{
        width: 350px;
        height: 350px;
        border: 1px solid black;
        float: left;
        position: relative;
    }
    .max{
        width: 350px;
        height: 350px;
        border: 1px solid black;
        float: left;
        display: none;
        overflow: hidden;
        position: relative;
    }
    .max img{
        position: absolute;
        top: 0;
        left: 0;
    }
    .enlarge{
        width: 150px;
        height: 150px;
        box-shadow: 0px 0px 10px black;
        background-color: skyblue;
        opacity: 0.3;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
    }
</style>

max的"overflow: hidden;"是把大图片超出的部分隐藏

一开始放大镜enlarge和max都是隐藏的且不占文本流,所以都是"display: none;"

放大镜enlarge最后要随鼠标移动而移动,是通过改变其距左边的距离而实现的,所以要设置定位"position: absolute;",且"left: 0;".

(2)原生js

<script type="text/javascript">
        var min = document.querySelector(".min"),
        max = document.querySelector(".max"),
        fd = document.querySelector(".enlarge"),
        img = document.querySelector(".max img");
        min.onmouseover = function () {
            // 1.鼠标覆盖显示max和enlarge
            max.style.display = "block";
            enlarge.style.display = "block";
            // 离开时隐藏
            min.onmouseout = function () {
                max.style.display = "none";
                enlarge.style.display = "none";
            }
            // 2.enlarge的移动范围
            min.onmousemove = function () {
                // 鼠标触摸的点
                var x = event.clientX - min.offsetLeft - enlarge.offsetWidth / 2;
                var y = event.clientY - min.offsetTop - enlarge.offsetHeight / 2;
                // 最大移动距离
                var maxX = min.clientWidth - enlarge.offsetWidth;
                var maxY = min.clientHeight - enlarge.offsetHeight;
                // 边界判断
                if (x <= 0) {
                    x = 0;
                } else if (x >= maxX) {
                    x = maxX;
                }
                if (y <= 0) {
                    y = 0;
                } else if (y >= maxY) {
                    y = maxY;
                }
                // enlarge的位置
                enlarge.style.left = x + "px";
                enlarge.style.top = y + "px";
                // 移动比例 (enlarge/min = max/img)
                var yidongX = x / maxX;
                var yidongY = y / maxY;
                // 3.max的对应显示
                img.style.left = yidongX * (max.clientWidth - img.offsetWidth) + "px";
                img.style.top = yidongY * (max.clientHeight - img.offsetHeight) + "px";
            }
        }
    </script>

注释都写在代码里了,其中鼠标进入小图片时的放大镜和大图片的出现比较简单,就是"display =none或block".

放大镜中心随鼠标移动而移动,需要用的两个属性clientX与clientY,鼠标距浏览器左边和上边的距离,它俩是实时获取的,只要鼠标动其值就跟着变化.

设置放大镜移动的位置即距离左边的距离 ,设为x ,x = event.clientX - min.offsetLeft - enlarge.offsetWidth / 2,

即鼠标的横向距离减去小图片距左边的距离再减去放大镜本身宽度的一般,这样就是放大镜中心随鼠标移动而移动(这里的min.offsetLeft值为8,

是系统自带的外边距).垂直方向和水平方向一个原理,不再赘述了.

大图片的移动.鼠标移动多少,大图片移动相应的比例就OK了,这就是简单的数学问题了,"enlarge/min = max/img".

注意大图片移动方向是和放大镜移动方向相反的,注意负号.

二、jQuery写法

(1)html和css部分的写法和原生js是一样的

(2)jQuery

<script src="js/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            // 1.鼠标覆盖min 显示放大镜
            $('.min').mousemove(function(e) {
                $('.max').show()
                $('.enlarge').show()
                // 放大镜移动
                // pageX/Y 相对于body内容的x/y(滚动条变化时跟随变化)
                                // offset().left 相当于 offsetLeft
                var x = e.pageX - $('.min').offset().left - $('enlarge').width() / 2
                var y = e.pageY - $('.min').offset().top - $('.enlarge').height() / 2
                // 最大移动范围
                var maxX = $('.min').width() - $('.enlarge').width()
                var maxY = $('.min').height() - $('.enlarge').height()
                // 范围约束
                if (x <= 0) {
                    x = 0;
                } else if (x >= maxX) {
                    x = maxX;
                }
                if (y <= 0) {
                    y = 0;
                } else if (y >= maxY) {
                    y = maxY;
                }
                // 设置位置
                $('.enlarge').css({
                    left: x,
                    top: y
                })
                // 2.放大镜移动 max上的图片等比例移动
                var yidongX = x / maxX
                var yidongY = y / maxY
                $('.max>img').css({
                    left: -yidongX * ($('.max>img').width() - $('.max').width()),
                    top: -yidongY * ($('.max>img').height() - $('.max').height())
                })
            }).mouseout(function() {
                $('.max').hide()
                $('.fd').hide()
            })  
        })
</script>

转载于:https://my.oschina.net/parchments/blog/3011548