体验效果：
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. 一步步学习javascript基础篇（6）：函数表达式之【闭包】

    回顾前面介绍过的三种定义函数方式 1. function sum (num1, num2) { return num1 + num2; }  //函数声明语法定义 2. var sum = funct ...

  2. [.net 面向对象程序设计进阶] (25) 团队开发利器（四）分布式版本控制系统Git——使用GitStack+TortoiseGit 图形界面搭建Git环境

    [.net 面向对象程序设计进阶] (25) 团队开发利器(四)分布式版本控制系统Git——使用GitStack+TortoiseGit 图形界面搭建Git环境 本篇导读: 前面介绍了两款代码管理工具 ...

  3. Ubuntu 安装OpenERP

    网上的都TM不靠谱.... 1.用root登录,修改/etc/apt/sources.list 文件 sudo /etc/apt/sources.list u root 注意一定要加U root否则没 ...

  4. sleep和wait区别

    1. sleep和wait都是用来进行线程控制,他们最大本质的区别是: sleep()不释放同步锁,wait()释放同步锁.               sleep(milliseconds)可以用时 ...

  5. [Hadoop大数据]——Hive数据的导入导出

    Hive作为大数据环境下的数据仓库工具,支持基于hadoop以sql的方式执行mapreduce的任务,非常适合对大量的数据进行全量的查询分析. 本文主要讲述下hive载cli中如何导入导出数据: 导 ...

  6. edit

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. C#设计模式-桥接模式

    这里以电视遥控器的一个例子来引出桥接模式解决的问题,首先,我们每个牌子的电视机都有一个遥控器,此时我们能想到的一个设计是——把遥控器做为一个抽象类,抽象类中提供遥控器的所有实现,其他具体电视品牌的遥控 ...

  8. 虚拟机网络驱动（共享文件夹）不见了的解决方案-适用于win7~win10 and Windows Server 2008~Windows Server 2012R2

    具体看图 手动打入下面选择部分的字符 \\vmware-host\Shared Folders 然后就可以了,这边有个红叉,重启后就没了 重启后

  9. SQL Server 2014新特性探秘(1)-内存数据库

    简介    SQL Server 2014提供了众多激动人心的新功能,但其中我想最让人期待的特性之一就要算内存数据库了.去年我再西雅图参加SQL PASS Summit 2012的开幕式时,微软就宣布 ...

  10. .NET平台开源项目速览(8)Expression Evaluator表达式计算组件使用

    在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,给大家初步介绍了一下Expression Evaluator验证组件.那里只是概述了一下,并没有对其使用和强大功能做 ...