鼠标滚轮事件+键盘按键事件(仿《主公莫慌》官网)

最新推荐文章于 2022-09-13 20:23:27 发布

yixiao_naihe

最新推荐文章于 2022-09-13 20:23:27 发布

阅读量1.1k

点赞数

分类专栏：前端 JQuery JavaScript 网站开发文章标签：鼠标事件按键事件滚动切换页面

本文链接：https://blog.csdn.net/yixiao_naihe/article/details/40982871

版权

JavaScript 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

JQuery

5 篇文章 0 订阅

订阅专栏

1.主公莫慌官网地址：http://zgmh.163.com/

2.页面效果：鼠标滚到最下方后，鼠标向下滚动一次，页面切换下一张，当前页分解模块，滑动到上方；

鼠标滚到最上方后，鼠标向上滚动一次，页面切换上一张，当前页分解模块，滑动到下方；

3.鼠标事件：给鼠标滚动绑定事件

此处要注意：滑动到底部时，才触发下一页函数，要判断滚动距离>=(网页内容高度-当前屏幕的高度)

var bodyh = document.body.offsetHeight || document.documentElement.offsetHeight;
	
	var winh = $(window).height();
	
	var minscrollh = bodyh - winh;

//当屏幕调整大小时，重新计算值
<pre name="code" class="javascript">$(window).resize(function(e) {
        
		winh = $(window).height();
		
		minscrollh = bodyh - winh;
		
    });

滑动到顶部时，才触发上一页函数，要判断滚动距离<=0

$(window).scroll(function(e) {
        
		scrollh = $(window).scrollTop();
		    
			//给页面绑定滑轮滚动事件，兼容写法
		if (document.addEventListener) {
			
				document.addEventListener('DOMMouseScroll', scrollFunc, false);
			
			}
		
		//滚动滑轮触发scrollFunc方法
		window.onmousewheel = document.onmousewheel = scrollFunc; 
		
    });



<pre name="code" class="javascript"> var scrollFunc = function (e) {
		 
         var data = 0;
		 
         e = e || window.event;
		 
       if(e.wheelDelta){//ie chrome 120 向上 -120向下
		   
		   data = e.wheelDelta/120;
		   
		   }else if(e.detail){//firefox -3向上 3向下
			   
			   data = -e.wheelDelta/3;
			   
			   }
		 
		  
		if(data < 0 &&scrollh >= minscrollh&&k == 1){
			//向下
			
				 k = 0;
				 
				 setTimeout(function(){ k = 1},500)
				 
				 nextpage()
			
			}else if(data > 0 &&scrollh <=0&&k == 1){
				//向上
				
					k = 0;
					
					setTimeout(function(){ k = 1},500)
					
					prevpage()
					
					}
    }

function nextpage(){
		
		         m = $index;
				 
				 $index++;
				
				if($index > 4){
					
					$index = 4;
					
					return false;
					
					}
					
				console.log($index+"向下")
				
				d(m,"",function(){
					
					  $(".page-"+$index).removeClass("hide").siblings(".page").addClass("hide");
					  
					  d($index,"next")})
		
		}
		
		
		
		function prevpage(){
			
					m = $index;
					
					$index--;
					
					if($index < 1){
						
						$index = 1;
						
						return false;
						
						}
					console.log($index+"向上")
					
					d(m,"",function(){
						
					  $(".page-"+$index).removeClass("hide").siblings(".page").addClass("hide");
					  
					  d($index,"next")})
			
			
			
			}

5.切换效果函数

切换要区分是准备显示的页，还是当前页，然后判断（页面运动效果）

要显示页：向上滑动通过css控制位置在最上方然后动画控制显示在正确位置

向下滑动通过css控制位置在最下方然后动画控制显示在正确位置

当前页向上滑动各模块动画运动到下方

向下滑动各模块动画运动到上方

附加完整js代码：

// JavaScript Document

$(document).ready(function(e) {
	
    var bodyh = document.body.offsetHeight || document.documentElement.offsetHeight;
	
	var winh = $(window).height();
	
	var minscrollh = bodyh - winh;
	
	var scrollh,//记录页面滑动距离
	
		k = 1,//鼠标滚一下 只记录一次数据
	
		$index = 1 ,//记录当前页面索引值
		
		m;//记录上一个页面
		
	console.log(minscrollh)
	
	
	
	function nextpage(){
		
		         m = $index;
				 
				 $index++;
				
				if($index > 4){
					
					$index = 4;
					
					return false;
					
					}
					
				console.log($index+"向下")
				
				d(m,"",function(){
					
					  $(".page-"+$index).removeClass("hide").siblings(".page").addClass("hide");
					  
					  d($index,"next")})
		
		}
		
		
		
		function prevpage(){
			
					m = $index;
					
					$index--;
					
					if($index < 1){
						
						$index = 1;
						
						return false;
						
						}
					console.log($index+"向上")
					
					d(m,"",function(){
						
					  $(".page-"+$index).removeClass("hide").siblings(".page").addClass("hide");
					  
					  d($index,"next")})
			
			
			
			}
	
	 var scrollFunc = function (e) {
		 
         var data = 0;
		 
         e = e || window.event;
		 
       if(e.wheelDelta){//ie chrome 120 向上 -120向下
		   
		   data = e.wheelDelta/120;
		   
		   }else if(e.detail){//firefox -3向上 3向下
			   
			   data = -e.wheelDelta/3;
			   
			   }
		console.log(data+" "+scrollh+" "+k)	 
		  
		if(data < 0 &&scrollh >= minscrollh&&k == 1){
			//向下
			
				 k = 0;
				 
				 setTimeout(function(){ k = 1},500)
				 
				 nextpage()
			
			}else if(data > 0 &&scrollh <=0&&k == 1){
				//向上
				
					k = 0;
					
					setTimeout(function(){ k = 1},500)
					
					prevpage()
					
					}
    }
	
	$(window).scroll(function(e) {
        
		scrollh = $(window).scrollTop();
		    
			//给页面绑定滑轮滚动事件
		if (document.addEventListener) {
			
				document.addEventListener('DOMMouseScroll', scrollFunc, false);
			
			}
		
		//滚动滑轮触发scrollFunc方法
		window.onmousewheel = document.onmousewheel = scrollFunc; 
		
    });
	
	$(window).resize(function(e) {
        
		winh = $(window).height();
		
		minscrollh = bodyh - winh;
		
    });
	
	//键盘按键操作
	
	$('html').bind("keyup",function(e){
		
		e.preventDefault()
		
		if(e.keyCode == 40){
			
			nextpage()
			
			}else if(e.keyCode == 38){
				
				prevpage()
				
				}
		
		})
		
	
	
	
	
	function d(a, e, fn) {
        switch (a) {
        case 1:
            "next" == e ? ($(".page-1 .intro").css("margin-top", "-656px").animate({
                marginTop: "0px"
            }, 500, "easeInQuad"), $(".page-1-bg").css("margin-top", "-520px").delay(300).animate({
                marginTop: "0px"
            }, 500, "easeInQuad"), $(".page-1 .left-content").css("margin-top", "-578px").delay(500).animate({
                marginTop: "0px"
            }, 500, "easeInQuad"), $(".page-1 .right-content").css("margin-top", "-767px").delay(700).animate({
                marginTop: "0px"
            }, 500, "easeInQuad"), $(".page-1 .player-btn").css("margin-top", "-569px").delay(700).animate({
                marginTop: "0px"
            }, 500, "easeInQuad")) : ($(".page-1-bg").animate({
                marginTop: "-656px"
            }, 500, "easeInQuad"), $(".page-1 .left-content").delay(300).animate({
                marginTop: "-520px"
            }, 500, "easeInQuad"), $(".page-1 .right-content").delay(500).animate({
                marginTop: "-578px"
            }, 500, "easeInQuad"), $(".page-1 .intro").delay(700).animate({
                marginTop: "-767px"
            }, 500, "easeInQuad"), $(".page-1 .player-btn").delay(500).animate({
                marginTop: "-569px"
            }, 500, "easeInQuad",fn));
            break;
        case 2:
            "next" == e ?(m<$index?($(".page-2 .right-top-btn").css("margin-top", "812px").animate({
                marginTop: "0"
            }, 500, "easeInQuad"), $(".page-2 .carousel-part").css("top", "760px").delay(200).animate({
                top: "0"
            }, 500, "easeInQuad"), $(".page-2 #prev-btn,.page-2 #next-btn").css("margin-top", "581px").delay(400).animate({
                marginTop: "0"
            }, 500, "easeInQuad"), $(".page-2 .carousel-nav").css("margin-top", "200px").delay(600).animate({
                marginTop: "0"
            }, 300, "easeInQuad", fn)):($(".page-2 .right-top-btn").css("margin-top", "-60px").animate({
                marginTop: "0"
            }, 500, "easeInQuad"), $(".page-2 .carousel-part").css("top", "-545px").delay(200).animate({
               top: "0"
            }, 500, "easeInQuad"), $(".page-2 #prev-btn,.page-2 #next-btn").css("margin-top", "-455px").delay(400).animate({
                marginTop: "0"
            }, 500, "easeInQuad"), $(".page-2 .carousel-nav").css("margin-top", "-720px").delay(600).animate({
                marginTop: "0"
            }, 500, "easeInQuad", fn))):(m<$index?($(".page-2 .right-top-btn").animate({
                marginTop: "-60px"
            }, 500, "easeInQuad"), $(".page-2 .carousel-part").delay(200).animate({
               top: "-545px"
            }, 500, "easeInQuad"), $(".page-2 #prev-btn,.page-2 #next-btn").delay(400).animate({
                marginTop: "-455px"
            }, 500, "easeInQuad"), $(".page-2 .carousel-nav").delay(600).animate({
                marginTop: "-720px"
            }, 500, "easeInQuad", fn)):($(".page-2 .right-top-btn").animate({
                marginTop: "812px"
            }, 500, "easeInQuad"), $(".page-2 .carousel-part").delay(200).animate({
               top: "760px"
            }, 500, "easeInQuad"), $(".page-2 #prev-btn,.page-2 #next-btn").delay(400).animate({
                marginTop: "581px"
            }, 500, "easeInQuad"), $(".page-2 .carousel-nav").delay(600).animate({
                marginTop: "200px"
            }, 500, "easeInQuad", fn)));
            break;
        case 3:
            "next" == e ? ($(".page-3 .right-top-btn").css("margin-top", "812px").animate({
                marginTop: "0"
            }, 500, "easeInQuad"), $(".page-3 .hero-type-option").css("top", "710px").delay(200).animate({
                top: "0"
            }, 500, "easeInQuad"), $(".page-3 .left-side").css("top", "650px").delay(400).animate({
                top: "0"
            }, 500, "easeInQuad"),$(".page-3 .card-list").css("margin-top", "650px").delay(600).animate({
                marginTop: "0"
            }, 500, "easeInQuad", fn)):(m<$index?($(".page-3 .right-top-btn").animate({
                marginTop: "-60px"
            }, 500, "easeInQuad"), $(".page-3 .hero-type-option").delay(200).animate({
                top: "-182px"
            }, 500, "easeInQuad"), $(".page-3 .left-side").delay(400).animate({
                top: "-676px"
            }, 500, "easeInQuad"),$(".page-3 .card-list").delay(600).animate({
                marginTop: "-676px"
            }, 500, "easeInQuad", fn)):($(".page-3 .right-top-btn").animate({
                marginTop: "812px"
            }, 500, "easeInQuad"), $(".page-3 .hero-type-option").delay(200).animate({
                top: "710px"
            }, 500, "easeInQuad"), $(".page-3 .left-side").delay(400).animate({
                top: "650px"
            }, 500, "easeInQuad"),$(".page-3 .card-list").delay(600).animate({
                marginTop: "650px"
            }, 500, "easeInQuad", fn)))
            break;
        case 4:
            "next" == e ? ($(".page-4 .right-top-btn").css("margin-top", "812px").animate({
                marginTop: "0"
            }, 500, "easeInQuad"), $(".page-4 .page-4-bg").css("margin-top", "925px").delay(200).animate({
                marginTop: "0"
            }, 500, "easeInQuad"), $(".page-4 .left-content").css("top", "720px").delay(400).animate({
               top: "0"
            }, 500, "easeInQuad"), $(".page-4 .intro").css("top", "425px").delay(600).animate({
               top: "0"
            }, 500, "easeInQuad",fn)) : ($(".page-4 .right-top-btn").animate({
                marginTop: "812px"
            }, 500, "easeInQuad"), $(".page-4 .page-4-bg").delay(200).animate({
                marginTop: "925px"
            }, 500, "easeInQuad"), $(".page-4 .left-content").delay(400).animate({
               top: "720px"
            }, 500, "easeInQuad"), $(".page-4 .intro").delay(600).animate({
               top: "425px"
            }, 500, "easeInQuad",fn))
        }
    }
	
	 
	
	
});