首页
所有分类
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 相关文章推荐
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
javascript学习笔记（七）利用javascript来创建和存储cookie
Apr 08 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 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
mysqldump(1) sentinel(1) CAD(1) macos(1) xps(1) sock(2) XPathParser(1) csgo(1) Stater(1) protocol(1)
You might like
东方红 - 来复式再生机的修复
2021/03/02 无线电
PHP 分页原理分析，大家可以看看
2009/12/21 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
PHP常用处理静态操作类
2015/04/03 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
Python常用内置函数总结
2015/02/08 Python
Python数据类型详解（二）列表
2016/05/08 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
python自动发微信监控报警
2019/09/06 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
如何在python中执行另一个py文件
2020/04/30 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
Unineed旗下时尚轻奢网站：FABHunt
2019/05/13 全球购物
SOA面试题：如何在SOA中实现松耦合
2013/07/21 面试题
计算机专业推荐信范文
2013/11/27 职场文书
财务出纳岗位职责
2014/02/03 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
保证书格式范文
2014/04/28 职场文书
运动会口号8字
2014/06/07 职场文书
评职称个人总结
2015/03/05 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
五一晚会主持词
2015/07/01 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS