jsフロアナビゲーション

34412 ワード


<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">1Fa><a class="word" href="javascript:;" style="display:block" data-id="0">  a>li>
        <li><a class="num" href="javascript:;">2Fa><a class="word" href="javascript:;" data-id="1">  a>li>
        <li><a class="num" href="javascript:;">3Fa><a class="word" href="javascript:;" data-id="2">  a>
        li><li><a class="num" href="javascript:;">4Fa><a class="word" href="javascript:;" data-id="3">  a>li>
        <li><a class="num" href="javascript:;">5Fa><a class="word" href="javascript:;" data-id="4">  a>li>
        <li><a class="num" href="javascript:;">6Fa><a class="word" href="javascript:;" data-id="5">  a>li>
        <li><a class="num" href="javascript:;">7Fa><a class="word" href="javascript:;" data-id="6">  a>li>
        <li><a class="num" href="javascript:;">8Fa><a class="word" href="javascript:;" data-id="7">  a>li>
        <li><a class="num" href="javascript:;">9Fa><a class="word" href="javascript:;" data-id="8">  a>li>
        <li><a class="num" href="javascript:;">10Fa><a class="word" href="javascript:;" data-id="9">  a>li>
        <li class="last"><a class="num" href="javascript:;">11Fa><a class="word" href="javascript:;" data-id="10">  a>li>
    ul>
div>


<div class="item" id="item-0">1div>
<div class="item" id="item-1">2div>
<div class="item" id="item-2">3div>
<div class="item" id="item-3">4div>
<div class="item" id="item-4">5div>
<div class="item" id="item-5">6div>
<div class="item" id="item-6">7div>
<div class="item" id="item-7">8div>
<div class="item" id="item-8">9div>
<div class="item" id="item-9">10div>
<div class="item" id="item-10">11div>

body>
html>