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

随机推荐

C# 多笔数据导入DB
6万笔数据瞬间导入进DB 命名空间 using NPOI.HSSF.UserModel; using NPOI.XSSF.UserModel; //Filename为文件路径 public JsonR ...
OpenCV自带dnn的Example研究（1）— classification
这个博客系列,简单来说,今天我们就是要研究 https://docs.opencv.org/master/examples.html下的 6个文件,看看在最新的OpenCV中,它们是如何发挥作用的. ...
0x11栈之Editor
参考链接:https://blog.csdn.net/SSLGZ_yyc/article/details/81700623 对顶栈的思想: 建立两个栈,栈A存储从序列开头到当前光标的位置的一段序列,栈 ...
vue 学习链接地址
使用Vue.js构建Web应用程序 http://www.jdon.com/48545# 一步步带你做vue后台管理框架(一)——介绍框架 http://www.cnblogs.com/herozho ...
nginx 配置反向代理
之前的前端是8123端口,使用此端口让nginx的反向代理. vim /etc/nginx/conf.d/80-fr.conf upstream cats{ server 127.0.0.1:8123 ...
time模块和os模块,json模块
import time # def month(n): # time.local() # struct_time=time.strptime("%Y-%m-1","%Y- ...
C# 数组与集合的区别
数组:声明数组的时候必须指定数组的长度.数组在内存中是连续的,索引速度很快,赋值和修改也很简单. 数组的容量是固定的,您只能一次获取或设置一个元素的值,而ArrayList或List的容量可根据需要自 ...
（转）Extracting knowledge from knowledge graphs using Facebook Pytorch BigGraph.
Extracting knowledge from knowledge graphs using Facebook Pytorch BigGraph 2019-04-27 09:33:58 This ...
【Python】函数总结
以下为自学笔记内容,仅供参考. 转发请保留原文链接https://www.cnblogs.com/it-dennis/p/10516688.html python中的函数最近看了python中关于函 ...
容器中的诊断与分析3——live diagnosis——lldb
windows下,我们对于.net程序发生Crash,资源泄露,死锁等问题的分析,有神器windbg .net core程序运行在linux上时,该怎么进行对对Core Dump文件进行分析呢?今天介 ...

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

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

随机推荐

热门专题