首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onFebruary 27, 2017

本文实例为大家分享了鼠标滚轮全屏切换的jquery代码，供大家参考，具体内容如下

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" rel="external nofollow" >
</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: 0;
margin: 0;
}

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: 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; /*滑入页面*/
}
/*为支持上述滑入特效写的*/
@-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);
}
}

js

(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横向纵向鼠标滚轮全屏切换

- Author -

joesmile

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
浅谈jQuery异步对象（XMLHttpRequest）
Nov 17 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
原生js实现旋转木马轮播图效果
Feb 27 #Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 #Javascript
js实现简单的手风琴效果
Feb 27 #Javascript
jquery实现弹窗功能（窗口居中显示）
Feb 27 #Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 #Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 #Javascript
js 调用百度分享功能
Feb 27 #Javascript
vue-cli3.x(1) 事件调度器(1) sched(1) 项目打包(2) okenizer(1) scss(1) watch(1) 分词器(1) 监听(2) re模块(2)
You might like
论建造顺序的重要性
2020/03/04 星际争霸
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
escape unescape的php下的实现方法
2007/04/27 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
PHP 验证登陆类分享
2015/03/13 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
Code：findPosX 和 findPosY
2006/12/20 Javascript
javascript 函数调用规则
2009/08/26 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
js面向对象的写法
2016/02/19 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
基于Python List的赋值方法
2018/06/23 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
美特斯邦威官方商城：邦购网
2016/10/13 全球购物
用Python匹配HTML tag的时候，<.*>和<.*?>有什么区别
2012/11/04 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
施工安全协议书
2013/12/11 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
销售人员求职信
2014/07/22 职场文书
创先争优活动心得体会
2014/09/04 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL