jQuery鼠标滚动垂直全屏切换代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标滚动垂直全屏切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>
<style type="text/css">
h1, body, html {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

h1 {
  font-size: 2em;
  font-weight: normal;
}

p {
  font-size: 1em;
  margin: 0.5em 0 2em 0;
}

#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;
}

#section0 p { color: #F1FF00; }

#section3 p { color: #00A3AF; }

.left { float: left; }

.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;
}

#section0 p {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-animation: sec0 1s ease-in-out 100ms forwards;
  animation: sec0 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);
}
}
 @-webkit-keyframes 
sec0 {  0% {
 -webkit-transform: translateX(100%);
 transform: translateX(100%);
}
 100% {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
}
 @keyframes 
sec0 {  0% {
 -webkit-transform: translateX(100%);
 transform: translateX(100%);
}
 100% {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
}
</style>
</head>
<body>
<div id="container">
	<div class="section active" id="section0">
	</div>
	<div class="section" id="section1">
		<div class="intro">
		  <h1 class="title">Section Two</h1>
		  <p>This is Section Two</p>
		  <img src="images/example.png"/> 
		</div>
	</div>
	<div class="section" id="section2">
		<div class="intro">
		  <h1 class="title">Section Three</h1>
		  <p>This is Section Three</p>
		  <img src="images/example2.png"/> 
		</div>
	</div>
</div>

<script src="js/jquery-2.1.1.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' : 'horizontal'
	  });
	});
</script>
</body>
</html>

JS代码(switchPage.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 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');
}
//移动页面 function scrollPage(element){
	var dest = element.position();
	if (dest == void 0) return;
	initEffects(dest,element);
}
//导航条初始化 function initPagination(){
	var length = sections.length;
	var pageHtml = '<ul id="pages"><li class="active"></li>' for (var i = 1;
	i < length;
	i++) pageHtml += '<li></li>';
	pageHtml += '</ul>';
	$("body").append(pageHtml);
}
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);

附件:下载该文件资源,减少时间成本(增值服务)