实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
AخA
 
1
<!DOCTYPE html>
2
<html lang="en">
3
    <head>
4
        <meta charset="UTF-8" />
5
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
        <title>Windy快速浏览内容插件 - 手册网www.shouce.ren</title>
7
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e37417206/css/windy.css" />
9
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e37417206/css/demo.css" />
10
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e37417206/css/style1.css" />
11
        <script type="text/javascript" src="/api/jq/5733e37417206/js/modernizr.custom.79639.js"></script>
12
        <noscript><link rel="stylesheet" type="text/css" href="/api/jq/5733e37417206/css/noJS.css" /></noscript>
13
    </head>
14
    <body>
15
        <div class="container">
16
            <section class="main">
17
                <div class="windy-demo">
18
                    <ul id="wi-el" class="wi-container">
19
                        <li><img src="/api/jq/5733e37417206/images/demo1/1.jpg" alt="/api/jq/5733e37417206/image1"/><h4>Coco Loko</h4><p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p></li>
20
                        <li><img src="/api/jq/5733e37417206/images/demo1/2.jpg" alt="/api/jq/5733e37417206/image2"/><h4>Vermouth Land</h4><p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p></li>
21
                        <li><img src="/api/jq/5733e37417206/images/demo1/3.jpg" alt="/api/jq/5733e37417206/image3"/><h4>Electrodynamics</h4><p>Before they sold out PBR magna jean shorts non seitan ea. Dolor wolf pop-up.</p></li>
22
                        <li><img src="/api/jq/5733e37417206/images/demo1/4.jpg" alt="/api/jq/5733e37417206/image4"/><h4>Retinal Bliss</h4><p>Locavore vero ad, before they sold out food truck bushwick helvetica.</p></li>
23
                        <li><img src="/api/jq/5733e37417206/images/demo1/5.jpg" alt="/api/jq/5733e37417206/image5"/><h4>Disco Fever</h4><p>Cillum laboris consequat, qui elit retro next level skateboard freegan hella.</p></li>
24
                        <li><img src="/api/jq/5733e37417206/images/demo1/6.jpg" alt="/api/jq/5733e37417206/image6"/><h4>Serenity</h4><p>Truffaut wes anderson hoodie 3 wolf moon labore, fugiat lomo iphone eiusmod vegan.</p></li>
25
                    </ul>
26
                    <nav>
27
                        <span id="nav-prev">上一张</span>
28
                        <span id="nav-next">下一张</span>
29
                    </nav>
30
                </div>
31
                <p class="info"><strong>提示:</strong> 点击左右按钮看看</p>
32
            </section>
33
        </div>
34
        <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
35
        <script type="text/javascript" src="/api/jq/5733e37417206/js/jquery.windy.js"></script>
36
        <script type="text/javascript">
37
            $(function() {
38
                var $el = $('#wi-el'),
39
                        windy = $el.windy(),
40
                        allownavnext = false,
41
                        allownavprev = false;
42
                $('#nav-prev').on('mousedown', function(event) {
43
                    allownavprev = true;
44
                    navprev();
45
                }).on('mouseup mouseleave', function(event) {
46
                    allownavprev = false;
47
                });
48
                $('#nav-next').on('mousedown', function(event) {
49
                    allownavnext = true;
50
                    navnext();
51
                }).on('mouseup mouseleave', function(event) {
52
                    allownavnext = false;
53
                });
54
                function navnext() {
55
                    if (allownavnext) {
56
                        windy.next();
57
                        setTimeout(function() {
58
                            navnext();
59
                        }, 150);
60
                    }
61
                }
62
                function navprev() {
63
                    if (allownavprev) {
64
                        windy.prev();
65
                        setTimeout(function() {
66
                            navprev();
67
                        }, 150);
68
                    }
69
                }
70
            });
71
        </script>
72
    </body>
73
</html>