js楼梯效果
程序员文章站
2022-03-11 19:13:10
...
楼梯效果
具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#warp{
width: 800px;
margin: 0 auto;
}
.box{
width: 100%;
height: 700px;
background: red;
color: #fff;
text-align: center;
font-size: 100px;
border: 3px solid yellow;
}
ul{
list-style: none;
position: fixed;
top:300px;
left:100px;
width: 60px;
/*display: none;*/
transform: scale(0);
transition: 1s;
}
li{
width: 100%;
height: 60px;
border: 1px solid red;
color: green;
font-size: 15px;
text-align: center;
line-height: 60px;
background: #ccc;
}
li:hover{
background: yellow;
}
</style>
</head>
<body>
<div id="warp">
<div class="box">进口零食</div>
<div class="box">进口酒</div>
<div class="box">帽子</div>
<div class="box">鞋子</div>
<div class="box">衣服</div>
<div class="box">家电</div>
<div class="box">手机</div>
<div class="box">电子</div>
<div class="box">居家</div>
<div class="box">家用</div>
</div>
<ul>
<li>进口零食</li>
<li>进口酒</li>
<li>帽子</li>
<li>鞋子</li>
<li>衣服</li>
<li>家电</li>
<li>手机</li>
<li>电子</li>
<li>居家</li>
<li>家用</li>
<li>回到顶部</li>
</ul>
</body>
<script type="text/javascript">
//1.滚动条离顶部一定距离后，楼梯出现，否则隐藏 （这里要判断滚动条到顶部的高度）
//2.点击楼梯按钮，自动出现相对应得页面。
//3.拖拽滚动条，页面上的商品刚好和楼梯按钮对应上。
//4.点击回到顶部
var oul=document.getElementsByTagName('ul')[0];
var oli=document.getElementsByTagName('li');
var obox=document.getElementsByClassName('box');
// console.log(obox[2].offsetTop)
window.onscroll=function(){
//获取滚动条到顶部的距离
var h=document.documentElement.scrollTop||document.body.scrollTop;
//判断滚动条的高度，是否显示ul标签
if(h>400){
// oul.style.display='block';
oul.style.transform='scale(1)'
}else{
// oul.style.display='none';
oul.style.transform='scale(0)'
}
//给最后一个li标签绑定点击事件，让滚动条回到顶端
oli[oli.length-1].onclick=function(){
// document.documentElement.scrollTop=document.body.scrollTop=0;
timer=setInterval(function(){
h-=50;//h=h-50;
if(h<=0){
clearInterval(timer)
}else{
document.documentElement.scrollTop=document.body.scrollTop=h;
}
},10)
}
//循环所有的li标签，给li标签绑定点击事件
for(var i=0;i<oli.length-1;i++){
oli[i].index=i;
oli[i].onclick=function(){
//this.index指向的是li的下标，让下标值*700 在把这个值赋值给滚动条
document.documentElement.scrollTop=document.body.scrollTop=this.index*700;
}
}
//循环div
for(var j=0; j<obox.length;j++){
//oli[j]会得到某个li赋值给m
//offsetTop得到某个元素到浏览器顶部的距离
if(h>=obox[j].offsetTop-300){
//循环所有的li
for(var k=0; k<oli.length; k++){
if(oli[j]==oli[k]){
oli[k].style.background='yellow';
}else{
oli[k].style.background='';
}
}
}
}
}
</script>
</html>
效果图