编程 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);
}
}

(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 相关文章推荐

摘自百度的图片轮换效果代码

Nov 19 Javascript

Javascript 模式实例观察者模式

Oct 24 Javascript

WEB 浏览器兼容推荐收藏

May 14 Javascript

textarea中的手动换行处理的jquery代码

Feb 26 Javascript

jQuery页面加载初始化常用的三种方法

Jun 04 Javascript

详解JavaScript编程中正则表达式的使用

Oct 25 Javascript

JavaScript手机振动API

Jun 11 Javascript

jquery实现全选、不选、反选的两种方法

Sep 06 Javascript

性能优化之代码优化页面加载速度

Mar 01 Javascript

JavaScript异步加载问题总结

Feb 17 Javascript

解决Vue axios post请求,后台获取不到数据的问题方法

Aug 11 Javascript

原生微信小程序开发中 redux 的使用详解

Feb 18 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