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

2019-11-19 17:24:13

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了鼠标滚轮全屏切换的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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：js实现图片左右滚动效果

下一篇：原生js实现旋转木马轮播图效果