前端特效——樓層監聽和回到頂部


樓層監聽和回到頂部 html+js+jquery

1、作者僅僅在IE上測試過,其它內核瀏覽器可能略有偏差。
2、如果需要使用此插件,僅僅復制就可運行。
3、歡迎用於學習,改進此功能。

 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>樓層監聽+回到頂部</title>
	<script type="text/javascript" src="jquery-2.1.4.js"></script>
</head>
<style>
	.floor1{						
		background-color: #DDDDDD;
		width: 700px;
		height: 800px;
		margin-top: 30px;
		margin-left: 40px;
	}
	.floor2{
		background-color:#FF88C2;
		width: 700px;
		height: 800px;
		margin-top: 30px;
		margin-left: 40px;
	}
	.floor3{
		background-color: #FF8888;
		width: 700px;
		height: 800px;
		margin-top: 30px;
		margin-left: 40px;
	}
	.floor4{
		background-color: #77FFCC;
		width: 700px;
		height: 800px;
		margin-top: 30px;
		margin-left: 40px;
	}
	.floor5{
		background-color: #99BBFF;
		width: 700px;
		height: 800px;
		margin-top: 30px;
		margin-left: 40px;
	}
	h1{										
		text-align: center;
		padding-top: 250px;
	}
	.listen{					  
		position: fixed;
		left: 1000px;
		top: 300px;
	}
	.listen ul{
		padding: 0px;
		margin: 0px;
		background-color: #E93EFF ;
		width: 80px;
		height: auto;
	}
	.listen ul li{
		border-bottom: solid #FF8800  1px;
		text-align: center;
		padding-top: 5px;
		margin: 0px;
		display: block;
		height: 25px;
	}
	.active{						
		background-color: #888888;
	}
	.rtop{							
		position: fixed;
		left: 90%;
		top: 90%;
		width: 15px;
		height: 40px;
		float: left;
		background-color: #BBFF66;
		cursor: pointer;

	}
</style>
<body>
	<div class="floor1 fl" ><h1>第一樓</h1></div>
	<div class="floor2 fl"><h1>第二樓</h1></div>
	<div class="floor3 fl" ><h1>第三樓</h1></div>
	<div class="floor4 fl" ><h1>第四樓</h1></div>
	<div class="floor5 fl" ><h1>第五樓</h1></div>
	<div class="listen">
		<ul>
			<li class="active">1F</li>			
			<li>2F</li>
			<li>3F</li>
			<li>4F</li>
			<li>5F</li>
		</ul>
	</div>
	<div class="rtop">頂部</div>

<script>
	function returnTop(){					//定義回到頂部函數returnTop()
		$('.rtop').hide();				//回到頂部先隱藏
		$('.rtop').click(function(){			//添加點擊事件——文檔在一秒內回到頂端
			$('body,html').animate({"scrollTop":"0"},1000);
		});
	}
	returnTop();
	$(window).scroll(function(){				//定義觸發事件——當滾動條滾動時發生
			var scrolltop;				//定義滾動條滾動的高度
			scrolltop=$(window).scrollTop();	//獲取滾動高度
			if(scrolltop>400){			//高度大於400時判斷
				$('.rtop').fadeIn();
			}else{
				$('.rtop').hide();
			}
		function listen(){				//定義監聽函數
			var floorTop =new Array();		//定義數組
			var listenTop;			  //監聽模塊的高度
			var floorHeight;			//樓層的高度(可見的固定高度)
			listenTop=$('.listen').offset().top;
			floorHeight=$('.fl').height();
			for(i=0;i<5;i++){			//循環把各樓層文檔高度獲取
				floorTop[i]=$('.fl').eq(i).offset().top;
				if(listenTop>=floorTop[i]){		//監聽模塊大於樓層高度時判斷
					$('li').eq(i).addClass('active');//添加類
					$('li').eq(i-1).removeClass('active');//刪除類
				}else{
					$('li').eq(i).removeClass('active');
				}
			}
		}
		listen();	
	});
</script>
</body>
</html>


實驗圖如上;   
     

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com