<!doctype html> <html> <head> <title>楼层跳跃式的页面布局</title> <meta charset="utf-8"> <style type="text/css"> *{ 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; } </style> </head> <body> <ul> <li>第一区域</li> <li>第二区域</li> <li>第三区域</li> <li>第四区域</li> </ul> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <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<arrcolor.length; i++){ ulliarr[i].style.backgroundcolor = arrcolor[i]; olliarr[i].style.backgroundcolor = arrcolor[i]; // 属性绑定索引值 olliarr[i].index = i; // 循环绑定，为每一个li绑定点击事件 olliarr[i].onclick =function(){ // 获取目标位置 target = ulliarr[this.index].offsettop; clearinterval(timer); // 利用缓动动画原理实现屏幕滑动 timer = setinterval(function(){ // (1).获取步长 var step = (target-leader)/10; // (2).二次处理步长 step = step > 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> </body> </html>
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 } }
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
echarts实现动态变色柱状图
jquery实现全选反选单选
jquery操作背景颜色渐变动画效果
以上就是h5+c3+js实现楼层跳跃特效的详细内容。