纯js实现PC端H5上下翻页

最新推荐文章于 2023-02-28 15:18:00 发布

八月的猪猪

最新推荐文章于 2023-02-28 15:18:00 发布

阅读量1k

点赞数

分类专栏：前端文章标签：上下滑动翻页 H5 PC端

本文链接：https://blog.csdn.net/qq_42894622/article/details/90548494

版权

前端专栏收录该内容

123 篇文章 3 订阅

订阅专栏

个人blog，欢迎关注加收藏


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			html,body{
				height:100%;
			}
			body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;}
			#wrap{
				overflow: hidden;
				width:100%;
			}
			#main{
				height:2944px;
				top:0;
				position: relative;
			}
			.page{
				width:100%;
				margin:0;
			}
			#page1{
				background:#E4E6CE;
			}
			#page2{
				background:#6CE26C;
			}
			#page3{
				background:#BF4938;
			}
			#page4{
				background:#2932E1;
			}
			</style>
			<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="wrap">
			<div id="main">
				<div id="page1" class="page"></div>
				<div id="page2" class="page"></div>
				<div id="page3" class="page"></div>
				<div id="page4" class="page"></div>
			</div>
		</div>
		<script type="text/javascript">
			var wrap = document.getElementById("wrap");
			var main = document.getElementById("main");
			var hei = document.body.clientHeight;
			wrap.style.height = hei + "px";
			var obj = document.getElementsByTagName("div");
			for(var i=0;i<obj.length;i++){
				if(obj[i].className == 'page'){
					 obj[i].style.height = hei + "px";
				}
			}
			//如果不加时间控制，滚动会过度灵敏，一次翻好几屏
			var startTime = 0, //翻屏起始时间  
				endTime = 0,  
				now = 0;     
			//浏览器兼容      
			if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){   
				document.addEventListener("DOMMouseScroll",scrollFun,false);        
			}  
			else if (document.addEventListener) {  
				document.addEventListener("mousewheel",scrollFun,false);  
			}  
			else if (document.attachEvent) {  
				document.attachEvent("onmousewheel",scrollFun);   
			}  
			else{  
				document.onmousewheel = scrollFun;  
			}  

			//滚动事件处理函数
			function scrollFun(event){
				startTime = new Date().getTime();  
				var delta = event.detail || (-event.wheelDelta);  
				//mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
				//DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
				if ((endTime - startTime) < -1000){
					if(delta>0 && parseInt(main.offsetTop) > -(hei*3)){
						//向下滚动
						now = now - hei;
						toPage(now);
				} 
					if(delta<0 && parseInt(main.offsetTop) < 0){
						//向上滚动
							now = now + hei;
							toPage(now);
					}
					 endTime = new Date().getTime();  
				}
				   else{  
						event.preventDefault();    
					}    
			}
			 function toPage(now){        
				 $("#main").animate({top:(now+'px')},1000);     //jquery实现动画效果
				 //setTimeout("main.style.top = now + 'px'",1000);     javascript 实现动画效果
			}   
		</script>
	</body>
	
</html>

八月的猪猪

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
纯js实现PC端H5上下翻页

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body{ height:100%; } body,ul,li,a,p...
复制链接

扫一扫