体验效果：
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

jQuery鼠标滚动垂直全屏切换代码的更多相关文章

  1. jquery横向纵向鼠标滚轮全屏切换

    html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  2. js实现网页全屏切换（平滑过渡），鼠标滚动切换

    实现效果为页面平滑过渡全屏切换,点击导航和鼠标滚动都可以切换. 效果图: html代码: <!DOCTYPE html> <html> <head lang=" ...

  3. jQuery插件开发——全屏切换插件

    这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下: <!--全屏滚动--> <div class="fullpage-contai ...

  4. jquery简单的大背景banner图片全屏切换

    详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上 ...

  5. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. jQuery 扩展 全屏切换

    (function ($) { //全屏切换方法 $.fn.toggleFullScreen = function (qp1, qp2) { var fullFlag = false; var _qp ...

  7. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  8. js 鼠标滚动到某屏时，加载那一屏的数据，仿京东首页楼层异步加载模式

    js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...

  9. 基于Ascensor.js全屏切换页面插件

    今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

随机推荐

  1. 利用Generator解决异步回调原理

    var i = 0; i++; function ajax(url){ return new Promise(function(resolve, reject){ setTimeout(functio ...

  2. 分辨率、DPI、PPI和屏幕尺寸，你都知道是啥么？

    分辨率.DPI.PPI和屏幕尺寸 分辨率 DPI/PPI 坑爹的屏幕尺寸 Reference 手机开发中不免会遇到分辨率.DPI.PPI和屏幕尺寸等术语,那就弄弄清楚这些概念的真正含义. 分辨率 分辨 ...

  3. SSH实战 · JAVA发送邮件相关

    发送激活邮件 电子邮箱:邮件服务器上的一块空间: 邮件服务器:类比于web服务器(tomcat),有相应的服务器软件: 邮件协议:大公司发送和接收服务器分开,也可以都用一个服务器.           ...

  4. mysql 截取身份证出生日期

    ,) ,) as date), '%m-%d') as 生日 from t_person

  5. C# BS消息推送 SignalR Hubs环境搭建与开发（二）

    1. 前言 本文是根据网上前人的总结得出的. 环境: SignalR2.x,VS2015,Win10 2. 开始开发 1)新建一个MVC项目,叫做SignalRDemo 2)安装SignalR包 In ...

  6. 【原】Python 用例：二进制写入和读取文件内容

    import pickle as p shoplistfile='shoplist.data' shoplist=['apple','carrot'] # because the dump opera ...

  7. 网页webp转非webp的jpg gif png 图片

    webp 谷歌提出的一种图片格式.支持动图: gif静图: png jpg 网页 webp / jpg / gif / png 图片提取. 已在微信.淘宝.京东.一号店上测试通过. 如果电脑上有 ch ...

  8. Atitit Mysql查询优化器 存取类型 范围存取类型 索引存取类型 AND or的分析

    Atitit Mysql查询优化器 存取类型 范围存取类型 索引存取类型 AND or的分析     Atitit Mysql查询优化器 存取类型 范围存取类型 索引存取类型 AND or的分析1 存 ...

  9. PHP 基础知识测试题 答案分析

    一:选择题(单项选择,每题2分): 1． LAMP具体结构不包含下面哪种(A      ) A:Windows系统              如果是这个就是WMP B:Apache服务器 C:MySQ ...

  10. 在drawable 画胶囊状

    <solid android:color="@color/colorAccent"></solid> <corners android:radius= ...