实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <title>Windy快速浏览内容插件 - 手册网www.shouce.ren</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="/api/jq/5733e37417206/css/windy.css" />
		<link rel="stylesheet" type="text/css" href="/api/jq/5733e37417206/css/demo.css" />
		<link rel="stylesheet" type="text/css" href="/api/jq/5733e37417206/css/style2.css" />
		<script type="text/javascript" src="/api/jq/5733e37417206/js/modernizr.custom.79639.js"></script>
		<noscript><link rel="stylesheet" type="text/css" href="/api/jq/5733e37417206/css/noJS.css" /></noscript>
    </head>
    <body>
        <div class="container">
            
			<section class="main">
				<div class="windy-demo windy-demo-2">
					<ul id="wi-el" class="wi-container">
						<li><img src="/api/jq/5733e37417206/images/demo2/1.jpg" alt="/api/jq/5733e37417206/image1"/><h4>Coco Loko</h4></li>
						<li><img src="/api/jq/5733e37417206/images/demo2/2.jpg" alt="/api/jq/5733e37417206/image2"/><h4>Vermouth Land</h4></li>
						<li><img src="/api/jq/5733e37417206/images/demo2/3.jpg" alt="/api/jq/5733e37417206/image3"/><h4>Electrodynamics</h4></li>
						<li><img src="/api/jq/5733e37417206/images/demo2/4.jpg" alt="/api/jq/5733e37417206/image4"/><h4>Retinal Bliss</h4></li>
						<li><img src="/api/jq/5733e37417206/images/demo2/5.jpg" alt="/api/jq/5733e37417206/image5"/><h4>Disco Fever</h4></li>
						<li><img src="/api/jq/5733e37417206/images/demo2/6.jpg" alt="/api/jq/5733e37417206/image6"/><h4>Serenity</h4></li>
					</ul>
					<nav>
						<span id="nav-prev">prev</span>
						<span id="nav-next">next</span>
					</nav>
				</div>
				<p class="info"><strong>Tip:</strong> to see the a continuous flow, keep your mouse down on the navigation arrows.</p>
			</section>
        </div>
   <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="/api/jq/5733e37417206/js/jquery.windy.js"></script>
        <script type="text/javascript">
			$(function() {
				var $el = $( '#wi-el' ),
					windy = $el.windy( {
						// rotation and translation boundaries for the items transitions
						boundaries : {
							rotateX : { min : 40 , max : 90 },
							rotateY : { min : -15 , max : 45 },
							rotateZ : { min : -10 , max : 10 },
							translateX : { min : -400 , max : 400 },
							translateY : { min : -400 , max : 400 },
							translateZ : { min : 350 , max : 550 }
						}
					} ),
					allownavnext = false,
					allownavprev = false;
				$( '#nav-prev' ).on( 'mousedown', function( event ) {
					allownavprev = true;
					navprev();
				} ).on( 'mouseup mouseleave', function( event ) {
					allownavprev = false;
				} );
				$( '#nav-next' ).on( 'mousedown', function( event ) {
					allownavnext = true;
					navnext();
				} ).on( 'mouseup mouseleave', function( event ) {
					allownavnext = false;
				} );
				function navnext() {
					if( allownavnext ) {
						windy.next();
						setTimeout( function() {
							navnext();
						}, 150 );
					}
				}
				function navprev() {
					if( allownavprev ) {
						windy.prev();
						setTimeout( function() {
							navprev();
						}, 150 );
					}
				}
			});
		</script>
    </body>
</html>

AخA
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <title>Windy快速浏览内容插件 - 手册网www.shouce.ren</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e37417206/css/windy.css" />
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e37417206/css/demo.css" />
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e37417206/css/style2.css" />
        <script type="text/javascript" src="/api/jq/5733e37417206/js/modernizr.custom.79639.js"></script>
        <noscript><link rel="stylesheet" type="text/css" href="/api/jq/5733e37417206/css/noJS.css" /></noscript>
    </head>
    <body>
        <div class="container">
            <!-- Codrops top bar --><!--/ Codrops top bar -->
            <section class="main">
                <div class="windy-demo windy-demo-2">
                    <ul id="wi-el" class="wi-container">
                        <li><img src="/api/jq/5733e37417206/images/demo2/1.jpg" alt="/api/jq/5733e37417206/image1"/><h4>Coco Loko</h4></li>
                        <li><img src="/api/jq/5733e37417206/images/demo2/2.jpg" alt="/api/jq/5733e37417206/image2"/><h4>Vermouth Land</h4></li>
                        <li><img src="/api/jq/5733e37417206/images/demo2/3.jpg" alt="/api/jq/5733e37417206/image3"/><h4>Electrodynamics</h4></li>