jquery_demo 放大镜

最新推荐文章于 2021-03-16 15:50:17 发布

前端酱紫

最新推荐文章于 2021-03-16 15:50:17 发布

阅读量247

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/wuj1935/article/details/106977816

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jquery_demo 放大镜

在这里插入图片描述
html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <!--版心  -->
    <div class="w">
        <!-- 左侧 -->
        <div class="leftBox">
            <!-- 上 -->
            <div class="top">
                <!-- 小黄盒子 -->
                <div class="tool"></div>
                <!-- 中图 -->
                <img alt="m1_m1" src="img/m1.jpg">
            </div>
            <ul>
                <li class="active">
                    <img alt="s1_s1" src="img/s1.jpg" msrc="m1.jpg" bsrc="b1.jpg">
                </li>
                <li>
                    <img alt="s2_s2" src="img/s2.jpg" msrc="m2.jpg" bsrc="b2.jpg">
                </li>
                <li>
                    <img alt="s3_s3" src="img/s3.jpg" msrc="m3.jpg" bsrc="b3.jpg">
                </li>
            </ul>
        </div>
        <!-- 右侧 -->
        <div class="rightBox">
            <img alt="b1_b1" src="img/b1.jpg" alt="">
        </div>
    </div>
    <script src="../lib/jquery-1.12.4.js"></script>
    <script>
        var path = 'img/'
            //【切换中图和大图】
            // 给一组小图注册鼠标进入事件
        $('.leftBox li').mouseenter(function() {
            // 当前的li突出显示，加类名，其他兄弟要移除类名
            $(this).addClass('active').siblings().removeClass('active');
            // 取出当前li中img上的属性 msrc 和 src，赋值给中图元素和大图元素
            var msrc = $(this).find('img').attr('msrc');
            var bsrc = $(this).find('img').attr('bsrc');
            // 更改中图元素
            $('.leftBox .top img').attr('src', path + msrc);
            // 更改大图元素
            $('.rightBox img').attr('src', path + bsrc);
        });

        // 【鼠标进入左侧上部分，显示效果小黄和右侧盒子】
        $('.leftBox .top').mouseover(function() {
            $('.tool').show();
            $('.rightBox').show();
        });
        // 【鼠标离开左侧上部分，隐藏效果小黄和右侧盒子】
        $('.leftBox .top').mouseleave(function() {
            $('.tool').hide();
            $('.rightBox').hide();
        });

        // 【鼠标在左侧上部分移动时，小黄和右侧大图按比例关系移动】
        $('.leftBox .top').mousemove(function(e) {
            // 计算小黄正确的位置
            var x = e.pageX - $('.leftBox').offset().left - $('.tool').width() / 2;
            var y = e.pageY - $('.leftBox').offset().top - $('.tool').height() / 2;

            // 限制
            if (x < 0) {
                x = 0;
            } else if (x > $('.leftBox .top').width() - $('.tool').width()) {
                x = $('.leftBox .top').width() - $('.tool').width();
            }
            if (y < 0) {
                y = 0;
            } else if (y > $('.leftBox .top').height() - $('.tool').height()) {
                y = $('.leftBox .top').height() - $('.tool').height();
            }

            // 设置小黄的位置
            $('.tool').css({
                left: x,
                top: y
            });
            // 设置右侧大图的位置
            $('.rightBox img').css({
                left: -2 * x,
                top: -2 * y
            });

        });
    </script>
</body>

</html>

css

/* 初始化 */
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}

/* 版心 */
.w {
  width: 1120px;
  margin: 0 auto;
}

/* 左侧盒子 */
.leftBox {
  width: 400px;
  float: left;
  position: relative;
}
.leftBox .top {
  width: 400px;
  border:1px solid #ccc;
}
.leftBox .top img {
  width: 400px;

}
.leftBox ul {
  width: 188px;
  margin: 10px auto;
}
.leftBox ul li {
  float: left;
  width: 54px;
  height: 54px;
  border:1px solid #fff;
}
.leftBox ul li.active {
  border-color: red;
}
.leftBox ul li + li {
  margin-left: 10px;
}

/* 右侧盒子 */
.rightBox {
  float: left;
  margin-left:10px;
  width: 500px;
  height: 500px;
  border:1px solid #ccc;
  overflow: hidden;
  position: relative;
  display: none;
}
.rightBox img {
  position: absolute
}

/* 小黄盒子 */
.leftBox .tool {
  width: 250px;
  height: 250px;
  background: gold;
  opacity: 0.5;
  position: absolute;
  display: none;
}

前端酱紫

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery_demo 放大镜

jquery_demo 放大镜html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&g
复制链接

扫一扫