你的位置:首页 > Java教程

[Java教程]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>

转自:http://hovertree.com/h/bjaf/switchpage.htm

特效汇总:http://www.cnblogs.com/roucheng/p/texiao.html