jQuery鼠标滚轮控制页面滑动代码

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

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

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

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery鼠标滚轮控制页面滑动代码</title>
<link rel="stylesheet" type="text/css" href="css/public.css" />
<link rel="stylesheet" type="text/css" href="css/zsstyle.css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="js/html5.js" type="text/javascript"></script>
<script src="js/respond.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/ie9-style.css" />
<![endif]-->
<script type="text/javascript">
$(function() {
	$(window).resize(function() {
		imgWH();
	}).resize();
	function imgWH() {
		var i = 0,
			imgpnglength = $('.imgpng').length;
		for(i=0; i < imgpnglength; i++) {
			var imgpng = $('.imgpng').eq(i),
				imgpngW = imgpng.width(),
				maximgpngW = imgpng.attr("width");
			if(imgpngW >=　maximgpngW){
				imgpng.attr('width', maximgpngW);
			} else {
				imgpng.attr('width', imgpngW);
			}
		}
		var imgtopW = $('.imgtop').width(),
			imgtopH = $('.imgtop').height();
		$('.gem-back').css({width:imgtopW*0.375,height:imgtopH*0.19,marginTop:imgtopH*0.259});
	}
});
</script>
</head>
<body>
<!-- container -->
<section id="section1" class="section section1">
  <article class="sectionWrapper section1Wrapper fadeInDown">
    <div class="sectionTitle">
      <h1 class="txthide">域名3.0</h1>
      <div class="txthide"> <span></span> <span>易名中国手机客户端</span> </div>
      <div id="gem-back"> <a class="gem-back" href="#"></a> </div>
      <h2><img src="images/text_01.png" width="260" alt="易名3.0" ></h2>
      <div class="iph_dload"> <a  href="#" > <img src="images/iphone_dload.png" width="260px" height="85px" alt="ipone下载"> </a> </div>
      <div class="andr_dload"> <a  href="#" > <img src="images/android_dload.png" width="260px" height="85px" alt="安卓下载"> </a> </div>
    </div>
    <div class="secitonbottombg"> <img src="images/fir_bg.jpg" width="1622px" class="imgpng"/> </div>
    <div class="arrow_down"> <a href="#section2"> <img src="images/arrow_down.png" width="42px" height="24px" alt="arrow_down"> </a> </div>
  </article>
</section>
<section id="section2" class="section section2">
  <article class="sectionWrapper section2Wrapper">
    <div class="secitonbottombg"> <img src="images/sec_bg.jpg"  width="1000"  akt="购买域名"/> </div>
    <div class="arrow_down"> <a href="#section3"> <img src="images/arrow_down.png" width="42px" height="24px" alt="arrow_down"> </a> </div>
  </article>
</section>
<section id="section3" class="section section3">
  <article class="sectionWrapper section3Wrapper">
    <div class="secitonbottombg"> <img src="images/thi_bg.jpg"  width="1128" alt="域名交流"/> </div>
    <div class="arrow_down"> <a href="#section4"> <img src="images/arrow_down.png" width="42px" height="24px" alt="arrow_down"> </a> </div>
  </article>
</section>
<section id="section4" class="section section4">
  <article class="sectionWrapper section4Wrapper">
    <div class="secitonbottombg"> <img src="images/fou_bg.jpg"  width="1128" alt="域名查询注册"/> </div>
    <div class="arrow_down"> <a href="#section5"> <img src="images/arrow_down.png" width="42px" height="24px" alt="arrow_down"> </a> </div>
  </article>
</section>
<section id="section5" class="section section5">
  <article class="sectionWrapper section5Wrapper">
    <div class="secitonbottombg"> <img src="images/fif_bg.jpg"  width="668" alt="域名管理"/> </div>
    <div class="arrow_down"> <a href="#section6"> <img src="images/arrow_down.png" width="42px" height="24px" alt="arrow_down"> </a> </div>
  </article>
</section>
<section id="section6" class="section section6">
  <article class="sectionWrapper section6Wrapper">
    <div class="secitonbottombg"> <img src="images/six_bg.jpg"  width="668" alt="新闻资讯"/> <a href="#" > <img src="images/download.jpg" width="300px" height="105px" alt="立即下载"> </a> </div>
  </article>
</section>
<!--回到顶部-->

<div id="arrow_up" > <a href="#" > <img src="images/slide_up.png" width="90px" height="90px" alt="回到顶部" > </a> </div>
<script type="text/javascript">
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
$(window).scroll(function(){
	var Yoffset=window.pageYOffset || document.documentElement.scrollTop;
	if (Yoffset> 2* h) {  
		$("#arrow_up").fadeIn(100);
	}else{
		$("#arrow_up").fadeOut(100);
	};
});
$("#arrow_up").bind("click",function(e){
	e.preventDefault();
	$("body").animate({"scrollTop":"0"},1000);
});
</script>  
<script src="js/sectionscroll.js" type="text/javascript"></script> 
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
</body>
</html>

JS代码(sectionscroll.js):

$(function(){
	sectionFixedWidth();
	$(window).resize(function(){
	sectionFixedWidth();
}
);
}
);
	//判断窗口大小function sectionFixedWidth(){
	var sectionFixed = $('.sectionFixed'),navFixed = $('.navFixed'),sectionFixedw = 300;
	sectionWidth = $(window).width(),sectionFixedleft = (sectionWidth - 780)/2;
	if(sectionFixedleft > sectionFixedw){
	sectionFixed.removeClass('sectionFixedmin');
	sectionFixed.css("left",sectionFixedleft - sectionFixedw);
}
else{
	if(sectionFixedleft < 200){
	sectionFixed.css("left",'0px');
}
else{
	sectionFixed.css("left",sectionFixedleft-200);
}
sectionFixed.addClass('sectionFixedmin');
}
if((sectionFixedleft - 150) > 20){
	navFixed.css("right",sectionFixedleft - 150);
}
else{
	navFixed.css("right",'20px');
}
}
console.log("\u767e\u5ea6\u641c\u7d22\u3010\u7d20\u6750\u5bb6\u56ed\u3011\u4e0b\u8f7d\u66f4\u591aJS\u7279\u6548\u4ee3\u7801");
	//珍品域名页面socroll事件$(function(){
	// price scrollPage();
	scrollWindow();
	// section_list $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html'):$('body')):$('html,body');
	$('.section_list li').each(function(i){
	$(this).click(function(){
	sectionBtn(i);
	$body.animate({
	scrollTop:$('#section' + (i)).offset().top}
,600);
	return false;
}
);
}
);
	$(window).scroll(function(){
	scrollWindow();
}
);
	$('.TopBtn').click(function(){
	backTop();
}
);
	$('.NextBtn').click(function(){
	$body.animate({
	scrollTop:$('.section').eq(navList-1).offset().top}
,600);
	$(this).fadeOut();
	return false;
}
);
}
);
	// backtopfunction backTop(){
	$("html,body").animate({
	scrollTop:0}
,900);
}
// backtop 隐藏判断事件function scrollWindow(){
	var navH = $('.nav').height();
	if ($(window).scrollTop() > navH){
	$(".TopBtn").fadeIn();
}
else{
	$(".TopBtn").fadeOut();
}
}
//提交资料 事件function sectionBtn(Btn){
	//if(Btn >= 2 && Btn<=4){
	$('.sectionFixed').fadeIn();
	//}
else{
	//$('.sectionFixed').hide();
	//}
}
//cur当前位置function scrollPagecur(cur){
	$('.section_list li').removeClass('cur');
	$('.section_list li').eq(cur).addClass('cur');
}
function scrollPage(){
	var currentSectionIndex = 0;
	var isScrolling = false;
	var sectionList = $('.section');
	var sectionCount = sectionList.length;
	var highlightedSection = 0;
	//全局section个数 navList = sectionCount;
	function highlightSection(i){
	$('.sectionWrapper').removeClass('fadeInDown');
	$(sectionList[i]).find('.sectionWrapper').addClass('fadeInDown');
}
function adjustCurrentSectionIndex(){
	var $w = $(window);
	var winScrollTop = $w.scrollTop();
	var winHeight = $w.height();
	var viewTop = $w.scrollTop(),viewBottom = viewTop + $w.height();
	for(var i = 0;
	i < sectionCount;
	i++){
	var section = $(sectionList[i]);
	var sectionTop = section.offset().top;
	var sectionHeight = section.height();
	var sectionBottom = sectionTop + sectionHeight;
	if(winScrollTop <= (sectionTop + sectionHeight) && winScrollTop > (sectionTop + sectionHeight*9/10)){
	highlightedSection=i+1;
	highlightSection(highlightedSection);
	currentSectionIndex = highlightedSection;
	$('.NextBtn').show();
}
else{
	highlightedSection = i;
}
if((sectionBottom+1) == viewBottom){
	$('.NextBtn').fadeOut();
}
if((sectionBottom <= viewBottom) && (sectionTop >= viewTop)){
	currentSectionIndex = i;
	break;
}
}
}
adjustCurrentSectionIndex();
	var ele;
	$(window).on('scroll',function(){
	adjustCurrentSectionIndex();
	sectionBtn(currentSectionIndex);
	scrollPagecur(currentSectionIndex);
	if (currentSectionIndex == 0){
	currentSectionIndex = 1;
}
;
	ele=sectionList[currentSectionIndex];
	$(ele).find('.sectionWrapper').addClass('fadeInDown');
	$(this).resize(function(){
	if(ele){
	scrollTo(ele);
}
}
);
}
) function scrollTo(ele){
	$('.sectionWrapper').removeClass('fadeInDown');
	isScrolling = true;
	$('html,body').stop().animate({
	scrollTop:$(ele).offset().top}
,500,function(){
	isScrolling = false;
	$(ele).find('.sectionWrapper').addClass('fadeInDown');
}
);
}
$('body').on('mousewheel',function(e){
	e.preventDefault();
	if(!isScrolling){
	var deltaY = e.deltaY;
	switch(deltaY){
	case 1:currentSectionIndex -= 1;
	if(currentSectionIndex < 0){
	currentSectionIndex = 0;
}
else{
	scrollTo(sectionList[currentSectionIndex]);
}
break;
	case -1:currentSectionIndex += 1;
	if(currentSectionIndex > sectionCount - 1){
	currentSectionIndex = sectionCount - 1;
}
else{
	scrollTo(sectionList[currentSectionIndex]);
}
break;
	default:break;
}
}
}
);
}

CSS代码(public.css):

/* CSS reset@ */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,a{padding:0;margin:0;}
table{border-collapse:collapse;border-spacing:0;}
del,ins{text-decoration:none;}
fieldset,img{border:0;}
body,button,textarea{font:14px/1.6 Arial,"Microsoft YaHei";color:#333;}
input,select{font:12px/1.6 Arial,"Microsoft YaHei";color:#333;}
input,select,img{vertical-align:middle;}
input,select{outline:none;}
select{height:22px;line-height:18px;padding:2px;}
ul,ol{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:14px;font-weight:400;}
address,cite,dfn,em,var{font-style:normal;}
legend{display:none;}
td{font-size:14px;line-height:140%;}
label{margin:0 0 0 5px;cursor:pointer;}
input::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0;}
.left{float:left;}
.right{float:right;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
a{color:#0c73b7;text-decoration:none;}
a:hover{color:#ff6a00;text-decoration:none;}
.txthide{text-indent:-999em;overflow:hidden;line-height:0;font-size:0}
.clearfix:after{content:"";height:0;visibility:hidden;display:block;clear:both;}
.clearfix{zoom:1;}
.clear{clear:both;height:0;overflow:hidden;}
.com_input{border:1px solid #ccc;font-size:12px;line-height:15px;padding:5.5px 5px;color:#777;}
.com_input:focus{color:#333;}
.c_red{color:#ff3535;}
.c_orange{color:#ff6a00;}
.c_blue{color:#008edf;}
.c_green{color:#0b9a00;}
.c_gray{color:#777;}
.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}

CSS代码(zsstyle.css):

html,body{width:100%;height:100%;}
.section .mt20{margin:0;}
.top{bavkground:#fff;height:30px;line-height:30px;text-align:center;}
.foot{z-index:101;}
section,article{width:100%;min-width:1000px;height:100%;position:relative;}
article .txthide{text-indent:-999999em;overflow:hidden;line-height:0;font-size:0px;display:none;}
.sectionTitle{width:100%;height:55%;margin:0 auto;padding-top:0px;text-align:center;position:absolute;top:7%;left:0;opacity:0;-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px);-webkit-transition:all 1s ease-out;transition:all 1s ease-out;z-index:8;}
.fadeInDown .sectionTitle{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
.sectionWrapper{width:100%;min-width:1000px;margin:0 auto;overflow:hidden;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"100%")}
.sectionBtndiv{width:100%;position:absolute;bottom:auto;left:0px;text-align:center;z-index:10;}
.sectionBtnsub{width:13%;margin:0 auto;text-align:center;display:block;max-width:195px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>195?"195px":"13%");}
.sectionBtnsub img{width:100%;}
.sectionbg{width:100%;height:100%;max-width:1920px;margin:0 auto;position:relative;z-index:1;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>1920?"1920px":"100%");}
.section1,.section2,.section3,.section4,.sectionbg5{-webkit-background-size:100% auto;background-size:100% auto;background-position:bottom center;background-repeat:no-repeat;}
.section1{background:#419dea;}
.section2{background-color:#f2aa31;}
.section3{background:#11be9b;}
.section4{background:#f78069;}
.section5{background:#845cd9;}
.section6{background:#56aaff;}
.secitonbottombg{width:100%;text-align:center;position:absolute;bottom:20%;left:0px;z-index:1;}
.section1 .secitonbottombg{position:absolute;bottom:0;left:0;}
.section2 .secitonbottombg img,.section5 .secitonbottombg img,.section6 .secitonbottombg img{width:70%;max-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>100?"1000px":"70%");}
.section3 .secitonbottombg img,.section4 .secitonbottombg img{width:79%;max-width:1128px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>100?"1128px":"79%");}
.section1 .secitonbottombg img{width:100%;max-width:1622px;height:auto;max-height:705px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>100?"1622px":"100%");}
.section2 .secitonbottombg img{height:auto;max-height:510px;}
.section3 .secitonbottombg img{height:auto;max-height:610px;}
.section4 .secitonbottombg img{height:auto;max-height:578px;}
.section5 .secitonbottombg img{height:auto;max-height:530px;}
.section6 .secitonbottombg img{height:auto;max-height:630px;}
.section1 .sectionTitle{text-align:center;opacity:1;top:28%;_top:26%;left:20%;z-index:30;}
.section1 .sectionTitle h2{position:absolute;top:0;left:0;height:52%;width:100%;text-align:center;}
.section1 .sectionTitle h2 img{height:100%;width:auto;}
.section1 .dload{position:absolute;top:60%;left:0;height:40%;width:100%;text-align:center;}
.section1 .iph_dload{position:absolute;top:60%;left:0;height:18%;width:100%;text-align:center;}
.section1 .iph_dload img,.section1 .andr_dload img{height:100%;width:auto;}
.section1 .andr_dload{position:absolute;top:85%;left:0;height:18%;width:100%;text-align:center;}
.section6 .secitonbottombg a{position:absolute;left:0;bottom:5%;height:15%;width:100%;z-index:99;}
.section6 .secitonbottombg a img{height:100%;width:auto;}
/*回到顶部*/
.arrow_down{position:absolute;bottom:10%;left:49%;z-index:100;}
#arrow_up{display:none;position:fixed;bottom:100px;right:50px;width:90px;height:90px;z-index:60;_position:absolute;_right:expression(eval(document.documentElement.scrollright+1000));_top:expression(eval(document.documentElement.scrollTop+700));}

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