jQuery鼠标滚动垂直全屏切换代码
体验效果：
http://hovertree.com/texiao/jquery/68/
源码下载：
http://hovertree.com/h/bjaf/f643upc4.htm
代码如下：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery鼠标滚动垂直全屏切换代码 - 何问起</title><base target="_blank" /> <style type="text/css"> h1, body, html { padding: 0; margin: 0; } html, body { height: 100%; overflow: hidden; } h1 { font-size: 2em; font-weight: normal; } p { font-size: 1em; margin: 0.5em 0 2em 0; } #container, .section { height: 100%; position: relative; } #section0, #section1, #section2, #section3 { background-color: #000; background-size: cover; background-position: 50% 50%; } #section0 { background-color: #024BCE; color: #fff; text-shadow: 1px 1px 1px #333; } #section1 { color: #fff; text-shadow: 1px 1px 1px #333; background-color: #31B81D; } #section2 { background-color: #01B5F0; color: #fff; text-shadow: 1px 1px 1px #666; } #section3 { color: #008283; background-color: #5D0FF1; text-shadow: 1px 1px 1px #fff; } #section0 p { color: #F1FF00; } #section3 p { color: #00A3AF; } .left { float: left; } .intro { position: absolute; top: 50%; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } #pages { position: fixed; right: 10px; top: 50%; list-style: none; } #pages li { width: 8px; height: 8px; border-radius: 50%; background: #fff; margin: 0 0 10px 5px; } #pages li.active { width: 14px; height: 14px; border: 2px solid #FFFE00; background: none; margin-left: 0; } #section0 .title { -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-animation: sectitle0 1s ease-in-out 100ms forwards; animation: sectitle0 1s ease-in-out 100ms forwards; } #section0 p { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-animation: sec0 1s ease-in-out 100ms forwards; animation: sec0 1s ease-in-out 100ms forwards; } @-webkit-keyframes sectitle0 { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes sectitle0 { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes sec0 { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes sec0 { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .hovertreecode{text-align:left;width:400px;margin:5px auto;border:solid green 1px;font-size:16px;} a{color:greenyellow} </style> </head> <body> <div id="container"> <div class="section active" id="section0"> <div class="intro"> <h1 class="title">jQuery简单的全屏滚动翻页</h1> <p> http://hovertree.com <br />请滚动鼠标滚轮。 </p> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等新版浏览器。</p> <p>来源：<a href="http://hovertree.com" target="_blank">何问起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/switchpage.htm">原文</a></p> </div> </div> <div class="section" id="section1"> <div class="intro"> <h1 class="title">Section Two</h1> <p>This is Section Two. keleyi.com</p> <img src="http://hovertree.com/texiao/jquery/68/images/hovertree1.jpg" alt="代码"/> </div> </div> <div class="section" id="section2"> <div class="intro"> <h1 class="title">Section Three</h1> <p>This is Section Three</p> <pre class="hovertreecode"><span style="color: #008000;">/*</span><span style="color: #008000;"> 使用代码 by 何问起 </span><span style="color: #008000;">*/</span><span style="color: #000000;"> $(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){ $(</span>"#container"<span style="color: #000000;">).switchPage({ </span>'loop' : <span style="color: #0000ff;">true</span><span style="color: #000000;">, </span>'keyboard' : <span style="color: #0000ff;">true</span><span style="color: #000000;">, </span>'direction' : 'horizontal'<span style="color: #000000;"> }); });</span></pre> </div> </div> </div> <script src="http://down.hovertree.com/jquery/jquery-2.2.3.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/switchPage.js"></script> <script type="text/javascript"> $(function(){ $("#container").switchPage({ 'loop' : true, 'keyboard' : true, 'direction' : 'horizontal' }); }); </script> </body> </html>
