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

html

<!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" />

<link rel="stylesheet" type="text/css" href="css/css.css">

</head>

<body>

<div id="container">

    <div class="section active" id="section0">

        <div class="intro">

            <h1 class="title">Section One</h1>

        </div>

    </div>

    <div class="section" id="section1">

        <div class="intro">

            <h1 class="title">Section Two</h1>

        </div>

    </div>

    <div class="section" id="section2">

        <div class="intro">

            <h1 class="title">Section Three</h1>

        </div>

    </div>

    <div class="section" id="section3">

        <div class="intro">

            <h1 class="title">Section Three</h1>

        </div>

    </div>

    <div class="section" id="section4">

        <div class="intro">

            <h1 class="title">Section Three</h1>

        </div>

    </div>

    <div class="section" id="section5">

        <div class="intro">

            <h1 class="title">Section Three</h1>

        </div>

    </div>

    <div class="section" id="section6">

        <div class="intro">

            <h1 class="title">Section Three</h1>

        </div>

    </div>

    <div class="section" id="section7">

        <div class="intro">

            <h1 class="title">Section Three</h1>

        </div>

    </div>

    <div class="section" id="section8">

        <div class="intro">

            <h1 class="title">Section Three</h1>

        </div>

    </div>

    <div class="section" id="section9">

        <div class="intro">

            <h1 class="title">Section Three</h1>

        </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' : 'vertical'

});

});

</script>

</body>

</html>

css

h1, body, html {

padding:;

margin:;

}

html, body {

height: 100%;

overflow: hidden;

}

h1 {

font-size: 2em;

font-weight: normal;

}

#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;

}

#section4 {

color: #fff;

text-shadow: 1px 1px 1px #333;

background-color: #31B81D;

}

#section5 {

background-color: #01B5F0;

color: #fff;

text-shadow: 1px 1px 1px #666;

}

#section6 {

color: #008283;

background-color: #5D0FF1;

text-shadow: 1px 1px 1px #fff;

}

#section7 {

color: #fff;

text-shadow: 1px 1px 1px #333;

background-color: #31B81D;

}

#section8 {

background-color: #01B5F0;

color: #fff;

text-shadow: 1px 1px 1px #666;

}

#section9 {

color: #008283;

background-color: #5D0FF1;

text-shadow: 1px 1px 1px #fff;

}

.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:;

}

#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; /*滑入页面*/

}

/*为支持上述滑入特效写的*/

@-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);

}

}

(function($) {

  var defaults = {

    'container': '#container', //容器

    'sections': '.section', //子容器

    'easing': 'ease', //特效方式，ease-in,ease-out,linear

    'duration': 1000, //每次动画执行的时间

    'pagination': true, //是否显示分页

    'loop': false, //是否循环

    'keyboard': true, //是否支持键盘

    'direction': 'vertical', //滑动的方向 horizontal,vertical,

    'onpageSwitch': function(pagenum) {}

  };

  var win = $(window);

  var iIndex = 0; //当前section的索引

  var arrElement = [];

  var canScroll = true;

  var container;

  var sections;

  var opts;

  var flag=false;

  var SP = $.fn.switchPage = function(options) {

    opts = $.extend({}, defaults, options || {});

    container = $(opts.container);

    sections = container.find(opts.sections);

    sections.each(function() {

      arrElement.push($(this));

    });

    return this.each(function() {

      if (opts.direction == 'horizontal') initLayout();

      if (opts.pagination) initPagination();

    })

  }

  //重置鼠标滚轮事件

  $(document).on("mousewheel DOMMouseScroll", MouseWheelHandler);

  function MouseWheelHandler(e) {

    e.preventDefault();

    var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;

    var delta = Math.max(-1, Math.min(1, value));

    if (canScroll) {

      if (delta < 0) {

        SP.moveSectionDown();

      } else {

        SP.moveSectionUp();

      }

    }

    return false;

  }

  //向上一张移

  SP.moveSectionUp = function() {

    if (iIndex) {

      iIndex--;

    } else if (opts.loop) {

      iIndex = arrElement.length - 1;

    }

    scrollPage(arrElement[iIndex]);

  }

  //向下一张移

  SP.moveSectionDown = function() {

    if (iIndex < (arrElement.length - 1)) {

      iIndex++

    } else if (opts.loop) {

      iIndex = 0;

    }

    scrollPage(arrElement[iIndex]);

  }

  //当设置横向移动时初始化横向页面

  function initLayout() {

    var width = (sections.length * 100) + '%',

      cellwidth = (100 / sections.length).toFixed(2) + '%';

    // container.width(width).addClass('left');

    container.width(width);

    sections.width(cellwidth).addClass('left');

  }

  //导航条初始化 hovertree.com

  function initPagination() {

    var length = sections.length;

    var pageHtml = '<ul id="pages"><li class="active" id="dot_0"></li>'

    for (var i = 1; i < length; i++) pageHtml += '<li id="dot_'+i+'"></li>';

    pageHtml += '</ul>';

    $("body").append(pageHtml);

    flag=true;

    if(flag==true){

    $("li").click(function(){

        var liId = $(this).attr("id");

        var arr = liId.split('_');

        iIndex=arr[1];

        scrollPage(arrElement[iIndex]);

    });

  }

  }

  /*跳转到dot对应页面*/

  function clickDot(){

  }

    //移动页面

  function scrollPage(element) {

    var dest = element.position();

    if (dest == void 0) return;

    initEffects(dest, element);

  }

  function isSupportCss(property) {

    var body = $('body')[0];

    for (var i = 0; i < property.length; i++) {

      if (property[i] in body.style) {

        return true;

      }

    }

    return false;

  }

  //移动页面的核心函数

  function initEffects(dest, element) {

    canScroll = false;

    var translate = "";

    if (opts.direction == 'horizontal') {

      translate = '-' + dest.left + 'px, 0px, 0px';

    } else {

      translate = '0px, -' + dest.top + 'px, 0px';

    }

    container.css({

      'transform': "translate3d(" + translate + ")",

      'transition': "all " + opts.duration + "ms " + opts.easing

    });

    container.on("webkitTransitionEnd msTransitionend mozTransitionend transitionend", function() {

      canScroll = true;

    });

    element.addClass("active").siblings().removeClass('active');

    if (opts.pagination) {

      paginationHandler();

    }

  }

  //每次页面移动时，修改导航栏 何问起

  function paginationHandler() {

    var pages = $('#pages li');

    pages.eq(iIndex).addClass('active').siblings().removeClass('active');

  }

  var resizeId;

  win.resize(function() {

    clearTimeout(resizeId);

    resizeId = setTimeout(function(){

      rebuild();

    }, 500);

  });

  function rebuild() {

    var currentHeight = win.height();

    var currentWidth = win.width();

    var element = arrElement[iIndex];

    if(opts.direction == "horizontal") {

      var offsetLeft = element.offset().left;

      if (Math.abs(offsetLeft) > (currentWidth/2) && iIndex < (arrElement.length - 1)){

        iIndex++

      }

    }else {

      var offsetTop = element.offset().top;

      if (Math.abs(offsetTop) > (currentHeight/2) && iIndex < (arrElement.length - 1)){

        iIndex++

      }

    }

    var currentElement = arrElement[iIndex],

    dest = currentElement.position();

    initEffects(dest, currentElement);

    if(opts.pagination) paginationHandler();

  }

})(jQuery);

jquery横向纵向鼠标滚轮全屏切换的更多相关文章

jQuery鼠标滚动垂直全屏切换代码
体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...
jQuery插件开发——全屏切换插件
这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下:  <div class="fullpage-contai ...
jquery简单的大背景banner图片全屏切换
详细内容请点击这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上 ...
js实现网页全屏切换（平滑过渡），鼠标滚动切换
实现效果为页面平滑过渡全屏切换,点击导航和鼠标滚动都可以切换. 效果图: html代码: <!DOCTYPE html> <html> <head lang=" ...
jQuery 扩展全屏切换
(function ($) { //全屏切换方法 $.fn.toggleFullScreen = function (qp1, qp2) { var fullFlag = false; var _qp ...
原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
基于Ascensor.js全屏切换页面插件
今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
一款jQuery仿海尔官网全屏焦点图特效代码
一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...

随机推荐

WPF 查找控件的所有子控件
/// <summary> /// 查找子控件 /// </summary> /// <typeparam name="T">控件类型</ ...
HBase Thrift过滤语法
摘抄自hbase ref guide 0.94: 在写本文的时候,hbase ref guide已经更新到1.2及2.0了,但是个人感觉Thrift过滤语法部分写得都没有0.94的好,省掉了examp ...
什么是Referer？Referer的作用？空Referer是怎么回事？
什么是Referer? Referer是 HTTP请求header 的一部分,当浏览器(或者模拟浏览器行为)向web 服务器发送请求的时候,头信息里有包含 Referer.比如我在www.sojson ...
svg---基础1
svg:可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网制定,是一个开放标准. 官网:http://www.w3.org/2000/svg ...
Java基础学习-Eclipse综述和运算符的使用
1.Eclipse的概述(磨刀不误砍柴工) -Eclipse是一个IDE(集成开发环境) -IDE(Intergrated Development Environment) ...
windows cannot find powershell.exe windows 7
This can happen when the environment variables are missing an entry for Powershell. $env:path must i ...
Python游戏编程入门4
Math和Graphics:Analog Clock示例程序本章介绍Python的math模块,该模块可以执行计算,如常见的三角正弦函数.余弦函数.正切函数等. 使用正弦和余弦函数绘制圆创建Anlog ...
Polly 熔断策略
熔断策略主要以 CircuitBreaker 来完成. 工作原理熔断器可以被看作为一个主要含有三个状态的状态机如果以电路开关来看: 开关闭合对应 CLOSED 状态, 开关打开对应 OPEN 状态 ...
【HNOI 2019】校园旅行
Problem Description 某学校的每个建筑都有一个独特的编号.一天你在校园里无聊,决定在校园内随意地漫步. 你已经在校园里呆过一段时间,对校园内每个建筑的编号非常熟悉,于是你情不自禁的把 ...
error LNK1169 找到一个或多个多重定义的符号的解决方法
问题描述如下: 有三个源文件,A.h.B.cpp.C.cpp. A.h是头文件,其中声明了三个变量a1.a2. a3. B.cpp是A.h中所声明的类的实现源代码,C.cpp是主程序文件.B.cpp ...

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

jquery横向纵向鼠标滚轮全屏切换的更多相关文章

随机推荐

热门专题