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

实现效果演示：

实现代码及注释：

！DOCTYPE htmlhtmlhead标题楼层跳跃式的页面布局/title meta charset=' utf-8 ' style type=' text/CSS ' * { margin 3360 0；padd : 0；}正文，html { height : 100%；} ul { list-style :无；高度： 100%;} ul Li {身高： 100%；} ol { list-style : no；位置：固定；top :200 pxleft : 50px } ol Li { width : 50px高度： 50pxborder: 1px固体# 000;文本对齐：中心；线高： 50px页边距-顶部：-1px；光标：指针；}/style/head dyul Li第一区域/li li第二区域/li li第三区域/li li第四区域/Li/ulol li1/Li Li 2/Li Li/Li Li/Li/olscript type=' text/JavaScript ' src=' http : my croll。js '/script脚本类型=' text/JavaScript '//点击开环（同开环)的李，屏幕滑动到对应的保险商实验所的li //利用窗户。scroll to()；缓动动画实现var ul=文档。getelementsbytagname(' ul ')[0]；var ol=文档。getelementsbytagname(' ol ')[0]；var ulLiArr=ul . children var olli arr=ol . children var目标=0;var leader=0；定义变量计时器=null//1。指定保险商实验所和开环（同开环)中里的背景色，对应里的背景色相同var arrColor=['绿色','橙色','黄色','红色','金色'];//利用为循环给两个数组中的元素上色for(var I=0；iarrColor.lengthI){ ulli ar[I]。风格。background COlOr=arr COlOr[I]；奥利阿[我]。风格。background COlOr=arr COlOr[I]；//属性绑定索引值奥利哈尔[i].索引=我；//循环绑定，为每一个里绑定点击事件奥利哈尔[i].onclick=function(){ //获取目标位置target=ulli ar[this。索引].offsetTopclearInterval(计时器);//利用缓动动画原理实现屏幕滑动定时器=设置间隔(函数(){ //(1))。获取步长var step=(目标-领导者)/10;//(2).二次处理步长步骤=步骤0?数学天花板（台阶):数学地板（台阶);//(3).屏幕滑动领导者=领导者步骤；window.scrollTo(0，leader)；//(4).清除定时器if(数学。ABS(目标-领导者)=数学。ABS(步骤)){窗口。scrollto(0，目标)；clearInterval(计时器);} }, 25);} //用卷起事件模拟盒子距离最顶端的距离window.onscroll=function(){ //每次屏幕滑动，把屏幕卷去的值赋给领袖，模拟获取显示区域距离顶部的距离leader=scroll().顶部；} }/script/body/htmlmyScroll.js

函数roll() { //开始封装自己的scrollTop if(window.pageYOffset！==未定义){ //ie9高版本浏览器//因为window.pageYOffset默认的是0,所以需要判断返回{ left: window.pageXOffset，top : window。pageyoffset } } else if(文档。compat mode===' css1 compat '){//标准浏览器，来判断有没有声明文档类型定义（Document Type Definition的缩写）返回{左：文档。文档元素。向左滚动，顶部：文档。文档元素。滚动顶部} }返回{ //未声明DTD留下了：文档。尸体。向左滚动，顶部：文档。尸体。滚动顶部} }总结

以上所述是小编给大家介绍的纯html css javascript实现楼层跳跃式的页面布局（实例代码),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！