PROMULGATOR

    ?

    广东省深圳市
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="main">
    <div class="img">
        <img src="https://www.jq22.com/img/cs/500x500-1.png">
    </div>
    <ul class="ico">
        <li><img src="https://www.jq22.com/img/cs/500x500-1.png"></li>
        <li><img src="https://www.jq22.com/img/cs/500x500-2.png"></li>
        <li><img src="https://www.jq22.com/img/cs/500x500-3.png"></li>
        <li><img src="https://www.jq22.com/img/cs/500x500-4.png"></li>
    </ul>
    <div class="big_img"></div>
</div>
<span></span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 .main {
    height:500px;
    width:1000px;
    margin:50px auto;
    border:1px solid #ccc;
    position:relative;
}
.img {
    display:inline-block;
    height:400px;
    width:300px;
    border:1px solid #ddd;
    margin:10px;
    line-height:400px;
    position:relative;
    cursor:crosshair;
}
.img img {
    height:100%;
    width:100%;
}
.big_img {
    position:absolute;
    top:10px;
    left:320px;
    width:300px;
    height:400px;
    border:1px solid #eee;
    background-size:600px 800px;
    display:none;
}
span {
    border:1px solid red;
    display:inline-block;
    height:50px;
    width:130px;
    position:fixed;
    top:20px;
    left:50px;
}
.ico {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(function() {
    var src = $('.img img').attr("src");
    $('.ico li img').click(function() {
        var srct = $(this).attr("src");
        $('.img img').attr("src", srct);
        src = srct;
    })
    $('.img').hover(function() {
        $('.big_img').css({
            "display": "block",
            "background-image": 'url(' + src + ')'
        });
        $(this).mousemove(function() {
            var x = event.offsetX - 1;
            var y = event.offsetY - 1;
            if (x < 75) {
                x = 0;
            } else if (75 <= x <= 300) {
                x = (x - 75) * 2;
                if (x > 300) {
                    x = 300;
                }
            }
            if (y < 100) {
                y = 0;
            } else if (100 <= y <= 400) {
                y = (y - 100) * 2;
                if (y > 400) {
                    y = 400;
                }
            }
            $('.big_img').css({
                "background-position-x": -x,
                "background-position-y": -y
            })
            $('span').text("x=" + x + "  y=" + y)
        })
    }, function() {
        $('.big_img').css("display", "none")
    })
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

jQuery淘宝查看大图代码

更新时间：2021-11-01 00:49:42

0