jquery横向纵向鼠标滚轮全屏切换 2024/11/19 饿虎岗资源网

本文实例为大家分享了鼠标滚轮全屏切换的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="/UploadFiles/2021-04-02/jquery-2.2.3.min.js">

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);



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： js实现图片左右滚动效果
下一篇：原生js实现旋转木马轮播图效果
jquery横向纵向鼠标滚轮全屏切换

最新资源
