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.赶快去和谐了它吧! 适用浏览器: ...

随机推荐

VS2017不能弹出安装界面的原因.
如果这里选中了放大.100%入坑解决办法: 禁用视觉主题,和元素,即可安装正常
外网访问内网MariaDB数据库
外网访问本地MariaDB数据库本地安装了MariaDB数据库,只能在局域网内访问,怎样从公网也能访问内网MariaDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Mar ...
TeamCity Agent安装
1 docker安装 docker run -it -e SERVER_URL= \ -v /home/lishan/teamcity/conf:/data/teamcity_agent/conf \ ...
第十八节 JS中的正则表达式
复习字符串操作: search 查找 substring 获取子字符串 charAt 获取某个字符 split 分割字符串,获取数组 var str = 'abcdefghijk'; alert(st ...
Cannot redeclare C() (previously declared in .
在引入支付宝入口文件AopSdk.php的时候报错:Cannot redeclare C() (previously declared in D:\phpStudy\WWW\thinkphp\help ...
Dell3470无法开机或开机黑屏情况下检测屏幕是否正常
故障现象:Dell3470无法开机,点击开关按键无任何反应故障分析:释放静电后故障依旧.更换电源适配器后故障依旧,初判主板故障,无法确认屏是否正常解决方法:除去拆机单独测试外,Dell售后告知一个 ...
JDBC——Java语言连接数据库的标准
JDBC概述 API JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Jav ...
mysql批量查询
一般批量查询的时候都是in关键字,但是在数据量大的时候,效率低下. 这个时候我们就可以考虑使用union . xml 核心代码 <select id="selectList" ...
EFI系统引导的一些零碎知识点
EFI目录下图只有Boot和Microsoft,如果你还装其他系统可能还会有其他的文件夹,比如你还装了Ubuntu(或者manjaro),那么会有个叫Ubuntu(manjaro)的文件夹与Boot ...
殊途同归 - Church-Rosser and Consistency of Evaluation
在"解释语言的语言"中提到,设计一个新的语言,仅仅是使用meta-language给出其描述是不够的,我们还需要去验证一些性质. 考虑一下我们在"解释语言 ...

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

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

随机推荐

热门专题