正文

纯html+css+javascript实现楼层跳跃式的页面布局（实例代码）

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0623

实现效果演示：

纯html+css+javascript实现楼层跳跃式的页面布局（实例代码）

实现代码及注释：






    
	
  • 
		第一区域
    • 
	
  • 
		第二区域
    • 
	
  • 
		第三区域
    • 
	
  • 
		第四区域
    • 



    
	
  1. 
		1
    2. 
	
  2. 
		2
    3. 
	
  3. 
		3
    4. 
	
  4. 
		4
    5. 


<script type="text/javascript" src="myScroll.js"></script> <script type="text/javascript"> // 点击ol的li，屏幕滑动到对应的ul的li // 利用window.scrollTo()；缓动动画实现 var ul = document.getElementsByTagName("ul")[0]; var ol = document.getElementsByTagName("ol")[0]; var ulLiArr = ul.children; var olLiArr = ol.children; var target = 0; var leader = 0; var timer = null; // 1. 指定ul和ol中li的背景色，对应li的背景色相同 var arrColor = ["green","orange","yellow","red","gold"]; // 利用for循环给两个数组中的元素上色 for(var i=0; i 0 ? Math.ceil(step) : Math.floor(step); // (3).屏幕滑动 leader = leader + step; window.scrollTo(0, leader); // (4).清除定时器 if(Math.abs(target-leader) <= Math.abs(step)){ window.scrollTo(0, target); clearInterval(timer); } }, 25); } // 用scroll事件模拟盒子距离最顶端的距离 window.onscroll = function(){ // 每次屏幕滑动，把屏幕卷去的值赋给leader，模拟获取显示区域距离顶部的距离 leader = scroll().top; } } </script> 


	  myScroll.js


function scroll() { 
 // 开始封装自己的scrollTop
 if(window.pageYOffset !== undefined) { 
  // ie9+ 高版本浏览器
  // 因为 window.pageYOffset 默认的是0,所以需要判断
  return {
   left: window.pageXOffset,
   top: window.pageYOffset
  }
 }
 else if(document.compatMode === "CSS1Compat") {
  // 标准浏览器,来判断有没有声明DTD
  return {
   left: document.documentElement.scrollLeft,
   top: document.documentElement.scrollTop
  }
 }
 return {
  // 未声明 DTD
  left: document.body.scrollLeft,
  top: document.body.scrollTop
 }
}