jQuery鼠标滚动控制全屏页面滚动js代码

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

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

以下是 jQuery鼠标滚动控制全屏页面滚动js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标滚动控制全屏页面滚动 </title>
<style type="text/css">
h1,body,html{
	padding: 0;
	margin: 0;
}
body{
	font-family: Arial,"Microsoft YaHei","Hiragino Sans GB",sans-serif;
}
html,body{
	height: 100%;
	overflow: hidden;
}
h1{
	font-size: 6em;
	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:#00ff99;
	color: #fff;
	text-shadow:1px 1px 1px #333;
}
#section1{
	color: #fff;
	text-shadow:1px 1px 1px #333;
	background:#FFCC00;
}
#section2{
	background:#2fe2bf;
	color: #fff;
	text-shadow:1px 1px 1px #666;
}
#section3{
	color: #008283;
	background:#c9302c;
	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" id="section1">
		<div class="intro">
			<h1 class="title">Example</h1>
			<p>HTML markup example to define 4 sections</p>
			<img src="images/example.png"/>
		</div>
		
	</div>
	<div class="section" id="section2">
		<div class="intro">
			<h1 class="title">Example</h1>
			<p>The plug-in configuration parameters</p>
			<img src="images/example2.png"/>
		</div>
	</div>
	<div class="section" id="section3">
		<div class="intro">
			<h1 class="title">THE END</h1>
			<p>Everything will be okay in the end. If it's not okay, it's not the end.</p>
		</div>
	</div>
</div>

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="pageswitch.js"></script>
<script type="text/javascript">
$(function(){
	$("#container").switchPage({
		'loop' : true,
		'keyboard' : true,
		'direction' : 'horizontal'
	});
});
</script>
</body>
</html>

JS代码(pageswitch.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),container,sections;
	var opts ={
}
,canScroll = true;
	var iIndex = 0;
	var arrElement = [];
	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();
}
if(opts.keyboard){
	keyDown();
}
}
);
}
//滚轮向上滑动事件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 scrollPage(element){
	var dest = element.position();
	if(typeof dest === 'undefined'){
	return;
}
initEffects(dest,element);
}
//重写鼠标滑动事件$(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;
}
//横向布局初始化function initLayout(){
	var length = sections.length,width = (length*100)+"%",cellWidth = (100/length).toFixed(2)+"%";
	container.width(width).addClass("left");
	sections.width(cellWidth).addClass("left");
}
//初始化分页function initPagination(){
	var length = sections.length;
	if(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 paginationHandler(){
	var pages = $("#pages li");
	pages.eq(iIndex).addClass("active").siblings().removeClass("active");
}
//是否支持css的某个属性function isSuportCss(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){
	var transform = ["-webkit-transform","-ms-transform","-moz-transform","transform"],transition = ["-webkit-transition","-ms-transition","-moz-transition","transition"];
	canScroll = false;
	if(isSuportCss(transform) && isSuportCss(transition)){
	var traslate = "";
	if(opts.direction == "horizontal"){
	traslate = "-"+dest.left+"px,0px,0px";
}
else{
	traslate = "0px,-"+dest.top+"px,0px";
}
container.css({
	"transition":"all "+opts.duration+"ms "+opts.easing,"transform":"translate3d("+traslate+")"}
);
	container.on("webkitTransitionEnd msTransitionend mozTransitionend transitionend",function(){
	canScroll = true;
}
);
}
else{
	var cssObj = (opts.direction == "horizontal")?{
	left:-dest.left}
:{
	top:-dest.top}
;
	container.animate(cssObj,opts.duration,function(){
	canScroll = true;
}
);
}
element.addClass("active").siblings().removeClass("active");
	if(opts.pagination){
	paginationHandler();
}
}
//窗口Resizevar resizeId;
	win.resize(function(){
	clearTimeout(resizeId);
	resizeId = setTimeout(function(){
	reBuild();
}
,500);
}
);
	function reBuild(){
	var currentHeight = win.height(),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 ++;
}
}
if(iIndex){
	paginationHandler();
	var cuerrentElement = arrElement[iIndex],dest = cuerrentElement.position();
	initEffects(dest,cuerrentElement);
}
}
//绑定键盘事件function keyDown(){
	var keydownId;
	win.keydown(function(e){
	clearTimeout(keydownId);
	keydownId = setTimeout(function(){
	var keyCode = e.keyCode;
	if(keyCode == 37||keyCode == 38){
	SP.moveSectionUp();
}
else if(keyCode == 39||keyCode == 40){
	SP.moveSectionDown();
}
}
,150);
}
);
}
}
)(jQuery);

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