体验效果：
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. 搭建 SVN 服务器

    安装.启动 SVN 服务器 在 Windows 下,可以使用以下命令将 SVN 服务注册到 windows 服务中去: sc create svnserver binPath= "drive ...

  2. Pycharm5注册方式

    0x1 ,安装 0x2 , 调整时间到2038年. 0x3 ,申请30天试用 0x4, 退出pycharm 0x5, 时间调整回来. ##注册方法2### 注册方法:    在 注册时选择 Licen ...

  3. ASP.NET MVC Routing学习笔记（一）

    Routing在ASP.NET MVC中是非常核心的技术,属于ASP.NET MVC几大核心技术之一,在使用Routing之前,得先引入System.Web.Routing,但其实不用这么麻烦,因为在 ...

  4. Java Math 取整的方式

    1.Math.floor floor,英文原意:地板. Math.floor 函数是求一个浮点数的地板,就是 向下 求一个最接近它的整数,它的值肯定会小于或等于这个浮点数. 2.Math.ceil c ...

  5. 【WP 8.1开发】How to 图像处理

    在今天的吹牛节目开始之前,先交代一件事: 关于玩WP 8.1开发所使用的VS版本问题.对版本的要求是2013的Update2,这是最低要求,只要是这个版本或以上都可以,而update3,update4 ...

  6. 传智播客--XAML布局--连连看界面（小白内容）

    一个简单的10*10连连看,有100个格子,可以在XAML里面用ColumnDefinition和RowDefinition各写10组,但是这样效率会很慢,因此,可以采用动态生成的方式进行. publ ...

  7. CSS3 Media Queries实现响应式布局

    概念我就不在这里写啦.大家可以看看以下网页: http://www.runoob.com/cssref/css3-pr-mediaquery.html http://www.w3cplus.com/c ...

  8. 【开源】OSharp框架解说系列（6.1）：日志系统设计

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  9. ASP.NET Core中的依赖注入（5）：ServicePrvider实现揭秘【补充漏掉的细节】

    到目前为止,我们定义的ServiceProvider已经实现了基本的服务提供和回收功能,但是依然漏掉了一些必需的细节特性.这些特性包括如何针对IServiceProvider接口提供一个Service ...

  10. JavaScript操作Cookie

    在Web开发中,我们经常使用Cookie保存一些不是非常敏高的数据.比如“下次自动登录”,“广告显示”等功能.定义是:某些网站为了辨别用户身份而存储在用户本地终端(主要是浏览器)上的数据.定义域RFC ...