京东之楼层跳跃
Posted 孙倩倩
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了京东之楼层跳跃相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
html,body,ul,ul li {
width: 100%;
height: 100%;
}
ul li {
font: 600 100px/400px "simsun";
text-align: center;
}
ol {
position: fixed;
left: 30px;
top: 60px;
}
ol li {
width: 100px;
height: 26px;
border: 1px solid #000;
margin-top: -1px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>服饰美妆</li>
<li>家电手机</li>
<li>电脑数码</li>
<li>3C运动</li>
<li>母婴家居</li>
<li>图书汽车</li>
</ul>
<ol>
<li>服饰美妆</li>
<li>家电手机</li>
<li>电脑数码</li>
<li>3C运动</li>
<li>母婴家居</li>
<li>图书汽车</li>
</ol>
<script src="../toolkit.js"></script>
<script>
var ul = document.getElementsByTagName("ul")[0];
var ulLiArr = ul.children;
var ol = document.getElementsByTagName("ol")[0];
var olLiArr = ol.children;
var colors = ["red","skyblue","green","brown","orange","pink"];
var leader =0;
var timer = null;
var target = 0;
window.onscroll = function(){
leader = scroll().top;
}
for(var i=0;i<olLiArr.length;i++){
olLiArr[i].index = i;
ulLiArr[i].style.backgroundColor=colors[i];
olLiArr[i].style.backgroundColor=colors[i];
olLiArr[i].onclick = function(){
target = ulLiArr[this.index].offsetTop;
clearInterval(timer);
timer = setInterval(function(){
//计算步长
var step = (target - leader)/10;
//步长二次处理吧
step = step >0 ? Math.ceil(step):Math.floor(step);
//赋值
leader+= step;
console.log(1);
window.scrollTo(0,leader);
if(target === leader){
clearInterval(timer);
}
},20);
}
}
</script>
</body>
</html>
引入toolkit.js代码内容：
function scroll(){
var scroll = {
top: window.pageYOffset || document.documentElement.scrollTop,
left: window.pageXOffset || document.documentElement.scrollLeft
}
return scroll;
}
function animate(ele,target){
clearInterval(ele.timer);
ele.timer = setInterval(function(){
//1.获取步长
var step = (target -ele.offsetLeft)/10;
//2.二次处理步长
step = step>0? Math.ceil(step):Math.floor(step);
//3、
ele.style.left = ele.offsetLeft+ step +"px";
console.log(1);
if(Math.abs(target -ele.offsetLeft)<=Math.abs(step)){
clearInterval(ele.timer);
ele.style.left = target + "px";
}
},20);
}
function client(){
return {
"width": window.innerWidth || document.documentElement.clientWidth,
"height": window.innerWidth ||document.documentElement.clientWidth,
}
}
function changeColor(){
if(client().width>960){
document.body.style.backgroundColor="blue";
}else if(client().width>640){
document.body.style.backgroundColor="red";
}else{
document.body.style.backgroundColor="orange";
}
}
function getStyle(ele,attr){
if(ele.window.getComputedStyle){
return ele.window.getComputedStyle(ele,null)[attr];
}else{
return ele.currentStyle[attr];
}
}
以上是关于京东之楼层跳跃的主要内容，如果未能解决你的问题，请参考以下文章