实例代码“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/jquery.ui.slider.css">
10
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e37417206/css/demo.css" />
11
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e37417206/css/style3.css" />
12
        <script type="text/javascript" src="/api/jq/5733e37417206/js/modernizr.custom.79639.js"></script>
13
        <noscript><link rel="stylesheet" type="text/css" href="/api/jq/5733e37417206/css/noJS.css" /></noscript>
14
    </head>
15
    <body>
16
        <div class="container">
17
            <!-- Codrops top bar --><!--/ Codrops top bar -->
18
            <section class="main">
19
                <div class="windy-demo windy-demo-3">
20
                    <ul id="wi-el" class="wi-container">
21
                        <li><a href="http://drbl.in/byYT"><img src="/api/jq/5733e37417206/images/demo3/1.jpg" alt="/api/jq/5733e37417206/image1"/></a></li>
22
                        <li><a href="http://drbl.in/bAXK"><img src="/api/jq/5733e37417206/images/demo3/2.jpg" alt="/api/jq/5733e37417206/image2"/></a></li>
23
                        <li><a href="http://drbl.in/bCop"><img src="/api/jq/5733e37417206/images/demo3/3.jpg" alt="/api/jq/5733e37417206/image3"/></a></li>
24
                        <li><a href="http://drbl.in/bGik"><img src="/api/jq/5733e37417206/images/demo3/4.jpg" alt="/api/jq/5733e37417206/image4"/></a></li>
25
                        <li><a href="http://drbl.in/bRFJ"><img src="/api/jq/5733e37417206/images/demo3/5.jpg" alt="/api/jq/5733e37417206/image5"/></a></li>
26
                        <li><a href="http://drbl.in/bUzE"><img src="/api/jq/5733e37417206/images/demo3/6.jpg" alt="/api/jq/5733e37417206/image6"/></a></li>
27
                    </ul>
28
                    <div id="slider"></div>
29
                </div>
30
            </section>
31
        </div>
32
       <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
33
        <script type="text/javascript" src="/api/jq/5733e37417206/js/jquery-ui-1.8.23.custom.min.js"></script>
34
        <script type="text/javascript" src="/api/jq/5733e37417206/js/jquery.windy.js"></script>
35
        <script type="text/javascript">
36
            $(function() {
37
                var $el = $( '#wi-el' ),
38
                    windy = $el.windy( {
39
                        // rotation and translation boundaries for the items transitions
40
                        boundaries : {
41
                            rotateX : { min : 40 , max : 90 },
42
                            rotateY : { min : -15 , max : 15 },
43
                            rotateZ : { min : -5 , max : 5 },
44
                            translateX : { min : -200 , max : 200 },
45
                            translateY : { min : -300 , max : -200 },
46
                            translateZ : { min : 50 , max : 100 }
47
                        }
48
                    } );
49
                $( '#slider' ).slider( {
50
                    animate : true,
51
                    min: 0,
52
                    max: windy.getItemsCount() - 1,
53
                    slide: function( event, ui ) {
54
                        windy.navigate( ui.value );
55
                    }
56
                } );
57
            });
58
        </script>
59
    </body>
60
</html>