elevator楼层效果

来源：互联网发布：记忆的证明知乎编辑：程序博客网时间：2024/04/24 22:15
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <meta name="keywords" content="js特效,网页特效代码,jquery特效 ,flash特效 ,html5特效,html特效,html代码,js代码 ,js广告代码 ,js网页特效代码 ,广告代码 ,特效代码,javascript特效,特效网,特效网站,高清图片下载,美图图片下载,字体下载,psd素材下载,PPT模版下载,ICO图标下载,PNG图标下载,AI矢量素材下载,EPS矢量素材下载"/>    <meta name="description" content="特效网专注于提供最全面最实用的js特效,网页特效代码,jquery特效 ,flash特效 ,html5特效,html特效,html代码,js代码 ,js广告代码 ,js网页特效代码 ,广告代码 ,特效代码,javascript特效,特效网,特效网站,高清图片下载,美图图片下载,字体下载,psd素材下载,PPT模版下载,ICO图标下载,PNG图标下载,AI矢量素材下载,EPS矢量素材下载,找资源,找素材,找特效就来特效网。"/>    <link rel="shortcut icon" href="http://www.zhaotexiao.com/favicon.ico" type="image/x-icon"/>    <script src="jquery.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();            }        })    })    $(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;    }    </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">服装</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></body></html>
0 0