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

随机推荐

BUAA Summer Practice 2017 #1 字符串专场
https://vjudge.net/contest/262753#overview C - Regular Number HDU - 5972 bitset temp, temp[i]=1表示此前 ...
angular2 ----字符串、对象、base64 之间的转换
1. JSON对象转化为字符串 let obj = { "name":Ayinger; "sex":"女"; } let str = JSO ...
datagridview 查询数据库数据
private void btnsearch_Click(object sender, EventArgs e) { if (txtSearch.Text != "") { thi ...
React Native之常用组件（View）
一. JSX和组件的概念 React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能.传统的创建方式是: 但这样的代码可读性 ...
JSP等模板引擎已死，大前端为趋势
我们先来看一下tomcat版本数据: 我们可以看到,从tomcat8之后JSP就再没有新的支持了,tomcat8大概是2013年发布的,也就是说,从2013年开始jsp技术已经实质上不被官方继续维护了 ...
gjt常用命令---chalee
Git常用命令一. git 基本操作流程 1. 从远程分支拉取并创建新的分支 git pull origin [远程分支名]:[本地分支名] // 从远程分支迁出本地分支,并切换到新的本地分支 gi ...
关于bootstrap框架美化的实例教程（python）
经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的b ...
Appium测试安卓apk遇到的问题及解决方法
1.Showing error - “Returned value cannot be converted to WebElement: {ELEMENT=1} 解决方法:https://sqa.s ...
使用Travis CI自动部署博客到github pages和coding pages
每次换系统或换电脑之后重新部署博客总是很苦恼?想像jekyll那样,一次性部署完成后,以后本地不用安装环境直接 git push 就能生成博客?那推荐你应该使用使用 Travis CI了. 这篇文章我 ...
Javascript 中的数据类型判断
(迁移自旧博客2017 09 25) typeof 我们常使用typeof来判断数据类型,在常规场景中足以应付数据类型判断的需要: var obj = { name: 'zhangxiang' }; ...

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

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

随机推荐

热门专题