git-baobing/index.html at master · indextg/git-baobing · GitHub

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>英雄--Logo</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <script type="text/javascript">
    </script>
</head>

<body>
    <div id="head">
        <a href="首页.html"><img src="images/logo_01.png" alt=""></a>
    </div>
    <div id="text">
        <h1>点击下面图片，跳转到下一个页面</h1>
    </div>
    <div id="nav">
        <ul>
            <li>
                <a href="index99.html"><img src="images/Aatrox_Splash_Tile_0.jpg"></a>
            </li>
            <li>
                <a href="index99.html"><img src="images/Ahri_Square_0.png"></a>
            </li>
            <li>
                <a href="index99.html"><img src="images/Alistar_Splash_Tile_0.jpg"></a>
            </li>
            <li>
                <a href="index99.html"><img src="images/Amumu_Splash_Tile_7.jpg"></a>
            </li>
            <li>
                <a href="index99.html"><img src="images/Ashe_Splash_Tile_0.jpg"></a>
            </li>
            <li class="mar">
                <a href="index99.html"><img src="images/AurelionSol_Square_0.png"></a>
            </li>
            <li>
                <a href="index99.html"><img src="images/Azir_Splash_Tile_0.jpg"></a>
            </li>
            <li>
                <a href="index99.html"><img src="images/Bard_Splash_Tile_0.jpg"></a>
            </li>
            <li>
                <a href="index99.html"><img src="images/Blitzcrank_Splash_Tile_0.jpg"></a>
            </li>
            <li>
                <a href="index99.html"><img src="images/Brand_Splash_Tile_0.jpg"></a>
            </li>
            <li>
                <a href="index99.html"><img src="images/Caitlyn_Splash_Tile_0.jpg"></a>
            </li>
            <li>
                <a href="index99.html"><img src="images/Camille_Splash_Tile_0.jpg"></a>
            </li>
            <li>
                <a href="index99.html"><img src="images/Cassiopeia_Splash_Tile_0.jpg"></a>
            </li>
            <li>
                <a href="index99.html"><img src="images/Zed_Splash_Tile_0.jpg"></a>
            </li>
        </ul>
    </div>
    <div class="box">
        <div class="img" style='background-image: url("./images/01.jpg");'></div>
        <ul class="imgList">
            <li><img src="./images/01.jpg" alt=""></li>
            <li><img src="./images/02.jpg" alt=""></li>
            <li><img src="./images/03.jpg" alt=""></li>
            <li><img src="./images/04.jpg" alt=""></li>
        </ul>
    </div>


</body>

</html>
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(function() {
        var imgs = ['images/01.jpg', 'images/02.jpg', 'images/03.jpg', 'images/04.jpg'];
        $('.imgList img').on('click', function() {
            $('.img').empty(); //初始化；
            var j = $('.imgList img').index($(this));
            var imgBg = $('.img').attr('style');
            console.log(imgBg);
            // console.log($('.img').attr('style').split('\"')[1]);
            $('.img').css('background-image', 'url(' + imgs[j] + ')');
            for (var i = 0; i < $('.img').height() / 10; i++) {
                var div = $('<div></div>');
                div.css({
                    'top': i * 10,
                    'background-image': 'url(' + imgBg.split('\"')[1] + ')',
                    'background-size': '1000px 550px',
                    'background-position-y': i * -10
                })
                $('.img').append(div);
            }
            $('.img div').each(function(i, ele) {
                $(ele).delay(i * 50).fadeOut(1000);
            });
        });
    });
</script>