jquery实现楼梯效果

最新推荐文章于 2021-12-09 19:39:09 发布

李_不理解

最新推荐文章于 2021-12-09 19:39:09 发布

阅读量3.5k

点赞数

文章标签： web前端图片 jquery 前端鼠标

本文链接：https://blog.csdn.net/sunflower_li/article/details/62423909

版权

在首页页面内容较长时为了更好的用户体验需要用到楼层，用来提示用户在哪一层，楼层显示当前楼层的名字，点击楼层可回到所对应的楼层，完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="libs/jquery-1.11.3.js"></script>
<script>
$(function () {
var arr = ['服饰','衣帽','家电','运动','美妆'];
var arr2 = ['1F','2F','3F','4F','5F'];
$('ul li').bind('mouseover',function () {
$(this).text(arr[$(this).index()]);
$('ul').children().css({ background : '',color : '#000'});
for(var i = 0;i < $(this).siblings().length;i++){
var index = $(this).siblings().eq(i).index();
$(this).siblings().eq(i).text(arr2[index]);
}
$(this).css({
cursor : 'pointer',
background : 'pink',
color : 'red'
});
});
$('ul li').mouseout(function () {
$(this).text(arr2[$(this).index()]);
$(this).css({ background : '',color : '#000'});
});
$('ul li').click(function(){
if($(this).index() == $('ul li').length-1){
$(document).scrollTop(0);
}else {
var scollTop = $('div').eq($(this).index()).offset().top;
$(document).scrollTop(scollTop);
}

});
$(window).scroll(function () {
if($(document).scrollTop() >= 200){
$('ul').css('display','block');
}else {
$('ul').css('display','none');
}
//判断当前在哪一层
for(var i =0;i < $('div').length;i++){
var topHeight = $(document).scrollTop() - $('div').eq(i).offset().top;
if(topHeight< $(window).height() && topHeight >0){
$('ul li').eq(i).text(arr[i]);
$('ul li').eq(i).css('color','red');
}else {
$('ul li').eq(i).text(arr2[i]);
$('ul li').eq(i).css('color','#000');
}
}
});

})
</script>
<style type="text/css">
*{margin: 0;padding: 0;}
ul{width: 40px;height: 240px;background: #f3f2f3;position: fixed;
left: 20px;top: 200px;display: none;}
li{list-style: none;width: 40px;height: 40px;
line-height : 40px;text-align:center;border-bottom: 1px dashed}
.last{border-bottom: 0;background: red;}
/*.box{position: absolute;left: 80px;}*/
div{width: 1000px;height: 900px;text-align: center;line-height: 900px;
font-size: 120px;position: absolute;right: 30px;}
.div1{background: #DDEEF6;top:0;}
.div2{background: #4cd964;top:900px;}
.div3{background: #f3f2f3;top:1800px;}
.div4{background: #cecece;top:2700px;}
.div5{background: green;top:3600px;}
</style>
</head>
<body>
<ul>
<li class="li1">1F</li>
<li class="li2">2F</li>
<li class="li3">3F</li>
<li class="li4">4F</li>
<li class="li5">5F</li>
<li class="last">Top</li>
</ul>
<div class="div1">服饰</div>
<div class="div2">衣帽</div>
<div class="div3">家电</div>
<div class="div4">运动</div>
<div class="div5">美妆</div>
</body>
</html>