elevator楼层效果

<!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>
参考资源链接:[Pathfinder基础教程:导航、3D与2D视详解](https://wenku.youkuaiyun.com/doc/1sofdwjxh6?utm_source=wenku_answer2doc_content) Pathfinder的导航视是组织疏散模型的关键工具,特别是对于楼层的定义和管理。为了帮助你更好地掌握这一技巧,推荐查看这份资料:《Pathfinder基础教程:导航、3D与2D视详解》。这份资源将为你提供实用的示例和解决方案,直接关联到你当前的问题。 在Pathfinder中,导航视按照层次结构展示了模型中的所有对象,其中楼层组(Floor Group)是专门用来定义和管理楼层的。你可以在此组内添加、删除或编辑楼层信息,例如楼层的高度、名称和对应的电梯管理等。 定义楼层时,通常需要使用导入几何功能导入建筑的CAD文件或相应格式的几何数据。然后,在楼层组中,你可以创建新的楼层,并通过属性编辑来详细设置楼层的相关参数。如果需要对楼层之间的关系进行管理,可以利用电梯组(Elevator Group)来定义和配置电梯,确保疏散模型中楼层间交通的准确性。 另外,行为脚本(Behavior Scripts)组允许你为楼层内群体的行为进行编程,以便模拟不同的疏散情况。通过在行为脚本组中编写或修改脚本,可以控制群体在紧急情况下的反应和行为,从而达到更精确的疏散模拟效果。 掌握了这些技能之后,你将能够有效地使用导航视进行楼层布局的定义和管理,为创建准确的疏散模型奠定坚实基础。如果希望进一步学习如何在Pathfinder中使用3D和2D视进行模型的观察和编辑,建议继续参考《Pathfinder基础教程:导航、3D与2D视详解》中的相关章节。这份资料不仅覆盖了导航视的使用,还提供了3D和2D视的详细操作指导,帮助你在整个建模和模拟过程中游刃有余。 参考资源链接:[Pathfinder基础教程:导航、3D与2D视详解](https://wenku.youkuaiyun.com/doc/1sofdwjxh6?utm_source=wenku_answer2doc_content)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值