实例代码“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/style2.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
            <!-- Codrops top bar --><!--/ Codrops top bar -->
17
            <section class="main">
18
                <div class="windy-demo windy-demo-2">
19
                    <ul id="wi-el" class="wi-container">
20
                        <li><img src="/api/jq/5733e37417206/images/demo2/1.jpg" alt="/api/jq/5733e37417206/image1"/><h4>Coco Loko</h4></li>
21
                        <li><img src="/api/jq/5733e37417206/images/demo2/2.jpg" alt="/api/jq/5733e37417206/image2"/><h4>Vermouth Land</h4></li>
22
                        <li><img src="/api/jq/5733e37417206/images/demo2/3.jpg" alt="/api/jq/5733e37417206/image3"/><h4>Electrodynamics</h4></li>
23
                        <li><img src="/api/jq/5733e37417206/images/demo2/4.jpg" alt="/api/jq/5733e37417206/image4"/><h4>Retinal Bliss</h4></li>
24
                        <li><img src="/api/jq/5733e37417206/images/demo2/5.jpg" alt="/api/jq/5733e37417206/image5"/><h4>Disco Fever</h4></li>
25
                        <li><img src="/api/jq/5733e37417206/images/demo2/6.jpg" alt="/api/jq/5733e37417206/image6"/><h4>Serenity</h4></li>
26
                    </ul>
27
                    <nav>
28
                        <span id="nav-prev">prev</span>
29
                        <span id="nav-next">next</span>
30
                    </nav>
31
                </div>
32
                <p class="info"><strong>Tip:</strong> to see the a continuous flow, keep your mouse down on the navigation arrows.</p>
33
            </section>
34
        </div>
35
   <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
36
        <script type="text/javascript" src="/api/jq/5733e37417206/js/jquery.windy.js"></script>
37
        <script type="text/javascript">
38
            $(function() {
39
                var $el = $( '#wi-el' ),
40
                    windy = $el.windy( {
41
                        // rotation and translation boundaries for the items transitions
42
                        boundaries : {
43
                            rotateX : { min : 40 , max : 90 },
44
                            rotateY : { min : -15 , max : 45 },
45
                            rotateZ : { min : -10 , max : 10 },
46
                            translateX : { min : -400 , max : 400 },
47
                            translateY : { min : -400 , max : 400 },
48
                            translateZ : { min : 350 , max : 550 }
49
                        }
50
                    } ),
51
                    allownavnext = false,
52
                    allownavprev = false;
53
                $( '#nav-prev' ).on( 'mousedown', function( event ) {
54
                    allownavprev = true;
55
                    navprev();
56
                } ).on( 'mouseup mouseleave', function( event ) {
57
                    allownavprev = false;
58
                } );
59
                $( '#nav-next' ).on( 'mousedown', function( event ) {
60
                    allownavnext = true;
61
                    navnext();
62
                } ).on( 'mouseup mouseleave', function( event ) {
63
                    allownavnext = false;
64
                } );
65
                function navnext() {
66
                    if( allownavnext ) {
67
                        windy.next();
68
                        setTimeout( function() {
69
                            navnext();
70
                        }, 150 );
71
                    }
72
                }
73
                function navprev() {
74
                    if( allownavprev ) {
75
                        windy.prev();
76
                        setTimeout( function() {
77
                            navprev();
78
                        }, 150 );
79
                    }
80
                }
81
            });
82
        </script>
83
    </body>
84
</html>