js 楼层导航

来源：互联网发布：facebook mac客户端编辑：程序博客网时间：2024/05/16 18:30
js 楼层导航

<!DOCTYPE html ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>    <title>jQuery防京东浮动网站楼层导航代码</title>    <script src="../js/jquery-1.7.2.min.js"></script>    <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();                }            })　　　　　　//楼层点击事件 定位到楼层            $(".word").click(function () {                var id = $(this).attr("data-id");                var h = $("#item-" + id).offset().top;                $('body,html').animate({ scrollTop: h }, 200);            });        })        $(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>    <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;        }        .item {            width: 1000px;            margin: 0 auto 30px auto;            height: 750px;            border:1px solid #808080;        }    </style></head><body><div id="box">    <ul>        <li><a class="num" href="javascript:;" style="display:none">1F</a><a class="word" href="javascript:;" style="display:block" data-id="0">服装</a></li>        <li><a class="num" href="javascript:;">2F</a><a class="word" href="javascript:;" data-id="1">美妆</a></li>        <li><a class="num" href="javascript:;">3F</a><a class="word" href="javascript:;" data-id="2">手机</a>        </li><li><a class="num" href="javascript:;">4F</a><a class="word" href="javascript:;" data-id="3">家电</a></li>        <li><a class="num" href="javascript:;">5F</a><a class="word" href="javascript:;" data-id="4">数码</a></li>        <li><a class="num" href="javascript:;">6F</a><a class="word" href="javascript:;" data-id="5">运动</a></li>        <li><a class="num" href="javascript:;">7F</a><a class="word" href="javascript:;" data-id="6">居家</a></li>        <li><a class="num" href="javascript:;">8F</a><a class="word" href="javascript:;" data-id="7">母婴</a></li>        <li><a class="num" href="javascript:;">9F</a><a class="word" href="javascript:;" data-id="8">食品</a></li>        <li><a class="num" href="javascript:;">10F</a><a class="word" href="javascript:;" data-id="9">图书</a></li>        <li class="last"><a class="num" href="javascript:;">11F</a><a class="word" href="javascript:;" data-id="10">服务</a></li>    </ul></div><div class="item" id="item-0">1</div><div class="item" id="item-1">2</div><div class="item" id="item-2">3</div><div class="item" id="item-3">4</div><div class="item" id="item-4">5</div><div class="item" id="item-5">6</div><div class="item" id="item-6">7</div><div class="item" id="item-7">8</div><div class="item" id="item-8">9</div><div class="item" id="item-9">10</div><div class="item" id="item-10">11</div></body></html>
0 0