用jquery实现淘宝放大镜以及图片切换

最新推荐文章于 2023-09-23 17:32:36 发布

Meroy0

最新推荐文章于 2023-09-23 17:32:36 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/Meroy0/article/details/100566602

版权

放大镜

    1. “缩略图”窗口与“原图”窗口中放置的是同一个图片，但“缩略图”窗口中的图片被缩小为400px，
    而“原图”窗口中的图片保持原始大小，溢出部分设为隐藏
    2. 先确定缩放比例，我们假定原图大小为1000px，缩略图大小为400px，缩放比例为2.5
    3. 首先实现“放大镜”框跟随鼠标移动的功能（我们让鼠标处于“放大镜”框的中心）
    4. 其次实现“原图”窗口中的图片随“放大镜”框的移动而相应移动
    5. 鼠标向右移动，“原图”窗口中的图片向左移动，它们的方向是相反的！这是实现原理中的关键环节
    6. “放大镜”框的大小不是随意设定的，它与放大倍数有关，如果要放大2.5倍，

html部分：

这里需要使用2长一定比例的图片，在页面中按比例设置2个div中来存放这2长图片，并在小图片的div中按照一定的比例设一个用来放大的区域

<div class="nav">
        <div id="box">
            <img src="./imgs/0_big.jpg" alt="">
            <div id="show"></div>
        </div>
        <div id='image'>
            <img src="./imgs/0_big.jpg" alt="">
        </div>
    </div>

    <div>
        <li><img src="./imgs/0_big.jpg" alt=""></li>
        <li><img src="./imgs/1_big.jpg" alt=""></li>
        <li><img src="./imgs/2_big.jpg" alt=""></li>
        <li><img src="./imgs/3_big.jpg" alt=""></li>
        <li><img src="./imgs/4_big.jpg" alt=""></li>
    </div>

在这里插入图片描述

主要的CSS样式：溢出隐藏overflow:hidden，隐藏图层display:none，定位position

用的主要事件：鼠标移动事件mousemove()和鼠标hover()

#box {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            position: relative;

        }
        #box img{
            width:600px;
            height:600px;
        }

        #image {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            overflow: hidden;
            position: relative;
        }

        li {
            list-style: none;
            float: left;
            border: 2px solid black;
        }
        li img{
            width: 100px;
            height: 100px;
            margin: 8.3px;
        }

        #show {
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            top:0;
        }
        .nav {
            height: 600px;
            width: 910px;
            display: flex;
            justify-content: space-between;
        }
        #image img{
            position: absolute;
            width:1300px;
            height:1300px;
        }

jquery部分代码

最后，实现大图片对应的移动，这里要注意，大图片的一定是与放大区域移动的方向相反的

$('div li img').click(function () {
            $('#box img').attr('src',this.src)
            $('#image img').attr('src',$('#box img')[0].src)
        })
        var box = $('#box')
        var image = $('#image')
        var btn = $('#show')
        var flge = false
        $('#show').mousedown(function () {
            flge = true
            $('#box').mousemove(function (e) {
                if(flge){
                    var moveX = e.pageX - 50;
                var moveY = e.pageY - 50;
                var maxX = e.pageX;
                var maxY = e.pageY;
                if (moveX < 0) {
                    moveX = 0;
                }
                if (moveY < 0) {
                    moveY = 0;
                }
                if (moveX > 400) {
                    moveX = 400;
                }
                if (moveY > 400) {
                    moveY = 400;
                }              
                $('#show').css('left', moveX)
                $('#show').css('top', moveY)
                $('#image img').css('left',(-moveX)*2)
                $('#image img').css('top',(-moveY)*2)
                } 
            })
        })
        $('#show').mouseup(function () {
            flge = false
        })

最后上全部代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" nav="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" nav="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
    <style>
        #box {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            position: relative;

        }
        #box img{
            width:600px;
            height:600px;
        }

        #image {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            overflow: hidden;
            position: relative;
        }

        li {
            list-style: none;
            float: left;
            border: 2px solid black;
        }
        li img{
            width: 100px;
            height: 100px;
            margin: 8.3px;
        }

        #show {
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            top:0;
        }
        .nav {
            height: 600px;
            width: 910px;
            display: flex;
            justify-content: space-between;
        }
        #image img{
            position: absolute;
            width:1300px;
            height:1300px;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div id="box">
            <img src="./imgs/0_big.jpg" alt="">
            <div id="show"></div>
        </div>
        <div id='image'>
            <img src="./imgs/0_big.jpg" alt="">
        </div>
    </div>

    <div>
        <li><img src="./imgs/0_big.jpg" alt=""></li>
        <li><img src="./imgs/1_big.jpg" alt=""></li>
        <li><img src="./imgs/2_big.jpg" alt=""></li>
        <li><img src="./imgs/3_big.jpg" alt=""></li>
        <li><img src="./imgs/4_big.jpg" alt=""></li>
    </div>

    <script>
        $('div li img').click(function () {
            $('#box img').attr('src',this.src)
            $('#image img').attr('src',$('#box img')[0].src)
        })
        var box = $('#box')
        var image = $('#image')
        var btn = $('#show')
        var flge = false
        $('#show').mousedown(function () {
            flge = true
            $('#box').mousemove(function (e) {
                if(flge){
                    var moveX = e.pageX - 50;
                var moveY = e.pageY - 50;
                var maxX = e.pageX;
                var maxY = e.pageY;
                if (moveX < 0) {
                    moveX = 0;
                }
                if (moveY < 0) {
                    moveY = 0;
                }
                if (moveX > 400) {
                    moveX = 400;
                }
                if (moveY > 400) {
                    moveY = 400;
                }              
                $('#show').css('left', moveX)
                $('#show').css('top', moveY)
                $('#image img').css('left',(-moveX)*2)
                $('#image img').css('top',(-moveY)*2)
                } 
            })
        })
        $('#show').mouseup(function () {
            flge = false
        })

    </script>
</body>

</html>

Meroy0

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
用jquery实现淘宝放大镜以及图片切换

放大镜 1. “缩略图”窗口与“原图”窗口中放置的是同一个图片，但“缩略图”窗口中的图片被缩小为400px，而“原图”窗口中的图片保持原始大小，溢出部分设为隐藏 2. 先确定缩放比例，我们假定原图大小为1000px，缩略图大小为400px，缩放比例为2.5 3. 首先实现“放大镜”框跟随鼠标移动的功能（我们让鼠标处于“放大镜”框的中心） 4. 其次实现“原...
复制链接

扫一扫