体验效果：
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. TODO：小程序的用户身份

    TODO:小程序的用户身份 小程序的用户身份有三种,一个管理员,二十个开发者,四十个体验者 1.管理员,可设置风险操作保护.风险操作提醒等操作. a)修改管理员,需要用到原管理员,新管理员的身份证号码 ...

  2. Hystrix框架2--超时

    timeout 在调用第三方服务时有些情况需要对服务响应时间进行把控,当超时的情况下进行fallback的处理 下面来看下超时的案例 public class CommandTimeout exten ...

  3. appledoc 使用brew命令安装使用

    appledoc --project-name yushuyi12345677 --project-company "xiaoyu123" --company-id aaaa -- ...

  4. Laravel 5.3 auth中间件底层实现详解

    1. 注册认证中间件, 在文件 app/Http/Kernel.php 内完成: protected $routeMiddleware = [ 'auth' => \Illuminate\Aut ...

  5. Knockout中文开发指南(完整版API中文文档) 目录索引

    a, .tree li > span { padding: 4pt; border-radius: 4px; } .tree li a { color:#46cfb0; text-decorat ...

  6. [转]深入理解JavaScript的变量作用域

    1.JavaScript的作用域链 2.函数体内部,局部变量的优先级比同名的全局变量高. 3.JavaScript没有块级作用域. 4.函数中声明的变量在整个函数中都有定义. 5.未使用var关键字定 ...

  7. 【WP开发】记录屏幕操作

    在某些应用中,比如游戏,有时候需要将用户的操作记录下来.ScreenCapture类提供了这个功能.但必须注意的是:此屏幕记录功能只对当前应用程序的屏幕有效,即只有当前应用程序在前台运行时才有效. 与 ...

  8. Python第一天 - set

    (一)初识set dict的作用是建立一组 key 和一组 value 的映射关系,dict的key是不能重复的.有的时候,我们只想要 dict 的 key,不关心 key 对应的 value,目的就 ...

  9. ASP.NET MVC5 网站开发实践(二) Member区域 - 全部文章列表

    显示文章列表分两块,管理员可以显示全部文章列表,一般用户只显示自己的文章列表.文章列表的显示采用easyui-datagrid.后台需要与之对应的action返回json类型数据   目录 ASP.N ...

  10. 【原创】开源.NET排列组合组件KwCombinatorics使用(二)——排列生成

           本博客所有文章分类的总目录:本博客博文总目录-实时更新 本博客其他.NET开源项目文章目录:[目录]本博客其他.NET开源项目文章目录 KwCombinatorics组件文章目录: 1. ...