首页
所有分类
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效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
详解Bootstrap 学习（一）入门
Apr 12 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
Node与Python 双向通信的实现代码
Jul 16 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
BufferPool(1) http_stub_status_module(1) location(2) text-shadow(1) zabbix(9) 复合索引(1) keeplive_timeout(1) 缓存机制(1) TypeScript(2) RTMP(1)
You might like
星际玩家的三大定律
2020/03/04 星际争霸
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
python处理图片之PIL模块简单使用方法
2015/05/11 Python
python requests 测试代理ip是否生效
2018/07/25 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
python删除某个目录文件夹的方法
2020/05/26 Python
预订全球最佳旅行体验：Viator
2018/03/30 全球购物
365 Tickets英国：全球景点门票
2019/07/06 全球购物
自荐信怎么写好
2013/11/11 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
三八妇女节寄语
2015/02/27 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
springboot中的pom文件 project报错问题
2022/01/18 Java/Android