如何使用纯html+css+javascript实现楼层跳跃式的页面布局

这篇文章给大家分享的是有关如何使用纯html+css+javascript实现楼层跳跃式的页面布局的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

枝江网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作,到程序开发,运营维护。创新互联成立于2013年到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

实现效果演示:

如何使用纯html+css+javascript实现楼层跳跃式的页面布局

实现代码及注释:




 楼层跳跃式的页面布局
 
 
  *{
   margin: 0;
   padding: 0;
  }
  body, html{
   height: 100%;
  }
  ul{
   list-style: none;
   height: 100%;
  }
  ul li{
   height: 100%;
  }
  ol{
   list-style: none;
   position: fixed;
   top:200px;
   left: 50px;
  }
  ol li{
   width: 50px;
   height: 50px;
   border: 1px solid #000;
   text-align: center;
   line-height: 50px;
   margin-top: -1px;
   cursor: pointer;
  }
 


     
  • 第一区域
  •  
  • 第二区域
  •  
  • 第三区域
  •  
  • 第四区域
     
  1. 1
  2.  
  3. 2
  4.  
  5. 3
  6.  
  7. 4
 // 点击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;   }  }

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
 }
}

感谢各位的阅读!关于“如何使用纯html+css+javascript实现楼层跳跃式的页面布局”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


文章标题:如何使用纯html+css+javascript实现楼层跳跃式的页面布局
本文路径:http://pwwzsj.com/article/gjjojj.html