京东楼层右侧滚动楼层显示code

最新推荐文章于 2022-12-19 10:24:40 发布

小疯子fry

最新推荐文章于 2022-12-19 10:24:40 发布

阅读量1.9k

点赞数

分类专栏： js 文章标签： js 前端

本文链接：https://blog.csdn.net/u012333649/article/details/50717087

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="./jquery-1.7.2.min.js"></script>
<title>jQuery京东浮动网站楼层导航代码 - A5源码</title>

<script>
$(function(){
// @ 给窗口加滚动条事件
$(window).scroll(function(){
// 获得窗口滚动上去的距离
var ling = $(document).scrollTop();
// 在标题栏显示滚动的距离
document.title = ling;
// 如果滚动距离大于1534的时候让滚动框出来
if(ling>1534){
$('#box').show();
}
if(1534<ling && ling<2300){
// 让第一层的数字隐藏，文字显示，让其他兄弟元素的li数字显示，文字隐藏
$('#box ul li').eq(0).find('.num').hide().siblings('.word').css('display','block');
$('#box ul li').eq(0).siblings('li').find('.num').css('display','block').siblings('.word').hide();
}else if(ling<3020){
$('#box ul li').eq(1).find('.num').hide().siblings('.word').css('display','block');
$('#box ul li').eq(1).siblings('li').find('.num').css('display','block').siblings('.word').hide();
}else if(ling<3595){
$('#box ul li').eq(2).find('.num').hide().siblings('.word').css('display','block');
$('#box ul li').eq(2).siblings('li').find('.num').css('display','block').siblings('.word').hide();
}else if(ling<4170){
$('#box ul li').eq(3).find('.num').hide().siblings('.word').css('display','block');
$('#box ul li').eq(3).siblings('li').find('.num').css('display','block').siblings('.word').hide();
}else if(ling<4885){
$('#box ul li').eq(4).find('.num').hide().siblings('.word').css('display','block');
$('#box ul li').eq(4).siblings('li').find('.num').css('display','block').siblings('.word').hide();
}else if(ling<5460){
$('#box ul li').eq(5).find('.num').hide().siblings('.word').css('display','block');
$('#box ul li').eq(5).siblings('li').find('.num').css('display','block').siblings('.word').hide();
}else if(ling<6035){
$('#box ul li').eq(6).find('.num').hide().siblings('.word').css('display','block');
$('#box ul li').eq(6).siblings('li').find('.num').css('display','block').siblings('.word').hide();
}else if(ling<6645){
$('#box ul li').eq(7).find('.num').hide().siblings('.word').css('display','block');
$('#box ul li').eq(7).siblings('li').find('.num').css('display','block').siblings('.word').hide();
}else if(ling<7360){
$('#box ul li').eq(8).find('.num').hide().siblings('.word').css('display','block');
$('#box ul li').eq(8).siblings('li').find('.num').css('display','block').siblings('.word').hide();
}else if(ling<7905){
$('#box ul li').eq(9).find('.num').hide().siblings('.word').css('display','block');
$('#box ul li').eq(9).siblings('li').find('.num').css('display','block').siblings('.word').hide();
}else if(ling<8790){
$('#box ul li').eq(10).find('.num').hide().siblings('.word').css('display','block');
$('#box ul li').eq(10).siblings('li').find('.num').css('display','block').siblings('.word').hide();
}
if(ling>8800 || ling<1534){
// $('#box').css('display','none'); // @ 这一句和下一句效果一样。
$('#box').hide();
}

})

})

$(function(){
$('#box ul li').hover(function(){
$(this).find('.num').hide().siblings('.word').css({'display':'block','background':'#CB1C39','color':'white'});
},function(){

$(this).find('.num').css({'display':'block','background':'white','color':'#666'}).siblings('.word').hide().css({'display':'none','background':'','color':''});
})
})
</script>

</head>
<style>

*{
margin: 0px;
padding: 0px;
font-size: 12px;
}
li,a{
list-style-type: none;
text-decoration: none;
}
#box{
position: fixed;
left: 30px;
top: 160px;
display: none;
}
#box ul li{
width: 30px;
height: 30px;
line-height: 30px;
border: 1px dotted #666;
text-align: center;
border-bottom:none;
}
#box ul li.last{
border-bottom: 1px dotted #666;
}
#box ul li .num{
color: #666;
/*display: none;*/
}
#box ul li .word{
display: none;
color: #CB1C39;
}
</style>
<body>
<div id="box">
<ul>
<li>
<a class="num" href="javascript:;" style="display:none">1F</a>
<a class="word" href="javascript:;" style="display:block">服装</a>
</li>
<li>
<a class="num" href="javascript:;">2F</a>
<a class="word" href="javascript:;">美妆</a>
</li>
<li>
<a class="num" href="javascript:;">3F</a>
<a class="word" href="javascript:;">手机</a>
</li>
<li>
<a class="num" href="javascript:;">4F</a>
<a class="word" href="javascript:;">家电</a>
</li>
<li>
<a class="num" href="javascript:;">5F</a>
<a class="word" href="javascript:;">数码</a>
</li>
<li>
<a class="num" href="javascript:;">6F</a>
<a class="word" href="javascript:;">运动</a>
</li>
<li>
<a class="num" href="javascript:;">7F</a>
<a class="word" href="javascript:;">居家</a>
</li>
<li>
<a class="num" href="javascript:;">8F</a>
<a class="word" href="javascript:;">母婴</a>
</li>
<li>
<a class="num" href="javascript:;">9F</a>
<a class="word" href="javascript:;">食品</a>
</li>
<li>
<a class="num" href="javascript:;">10F</a>
<a class="word" href="javascript:;">图书</a>
</li>
<li class="last">
<a class="num" href="javascript:;">11F</a>
<a class="word" href="javascript:;">服务</a>
</li>
</ul>
</div>
<img src="./pic.gif" alt="" />

</body>
</html>

小疯子fry

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
京东楼层右侧滚动楼层显示code

jQuery京东浮动网站楼层导航代码 - A5源码$(function(){// @ 给窗口加滚动条事件$(window).scroll(function(){// 获得窗口滚动上去的距离var ling = $(document).scrollTop();// 在标题栏显示滚动的距离document.title = ling;// 如果滚动距离大于15
复制链接

扫一扫