jQuery-前端楼层导航效果代码 - 苏飞论坛

上传

点击文件名下载附件

1.css样式

[CSS] 纯文本查看 复制代码

* {

                                margin: 0;

                                padding: 0;

                        }

                        

                        #container {

                                width: 900px;

                                margin: 0 auto;

                        }

                        

                        #container>* {

                                width: 100%;

                        }

                        

                        .header {

                                height: 2000px;

                                background: red;

                        }

                        

                        .item {

                                height: 1000px;

                                font: bold 25px/30px "微软雅黑";

                        }

                        

                        .footer {

                                height: 500px;

                                background: red;

                        }

                        

                        #nav {

                                width: 100px;

                                position: fixed;

                                left: 20px;

                                bottom: 300px;

                                list-style: none;

                                display: none;

                                cursor: pointer;

                        }

                        

                        #nav li {

                                height: 35px;

                                line-height: 35px;

                                border-bottom: 1px dashed #ccc;

                                text-align: center;

                                position: relative;

                                font-size: 25px;

                                margin-top: 1px;

                        }

                        

                        #nav li span {

                                position: absolute;

                                display: inline-block;

                                height: 35px;

                                line-height: 35px;

                                width: 100%;

                                text-align: center;

                                left: 0;

                                top: 0;

                                display: none;

                                background: #f00;

                                color: #fff;

                        }

2.HTML 代码

[HTML] 纯文本查看 复制代码

<div id="container">

                        <div class="header">header</div>

                        <div class="main">

                                <div class="item" style="background: palegreen;">1F</div>

                                <div class="item" style="background: pink;">2F</div>

                                <div class="item" style="background: blueviolet;">3F</div>

                                <div class="item" style="background: orange;">4F</div>

                                <div class="item" style="background: greenyellow;">5F</div>

                                <div class="item" style="background: red;">6F</div>

                                <div class="item" style="background: yellow;">7F</div>

                        </div>

                        <div class="footer">footer</div>

                </div>

                <div>

                        <ul id="nav">

                                <li>1F<span style="display: inline-block;" class="active">1楼</span></li>

                                <li>2F<span>2楼</span></li>

                                <li>3F<span>3楼</span></li>

                                <li>4F<span>4楼</span></li>

                                <li>5F<span>5楼</span></li>

                                <li>6F<span>6楼</span></li>

                                <li>7F<span>7楼</span></li>



                        </ul>



                </div>

3.js 代码

[JavaScript] 纯文本查看 复制代码

$(function() {

                                var winHeight = $(window).height(), //获取浏览器可是窗口的盖度

                                        headerHeight = $('.header').height(), //获取header的高度

                                        onOff = false; //布尔值变量,通错这个变量可以防止快速连续点击的时候出现的连续滚动



                                $(window).on('scroll', function() {



                                        var scTop = $(window).scrollTop(); //获取滚动条的滚动距离



                                        //当楼侧开始出现时显示楼层导航条



                                        if(scTop >= headerHeight - winHeight) {

                                                $('#nav').show(400); //也可以不传参数，传参数表示运动时间

                                        } else {

                                                $('#nav').hide(400);

                                        }

                                        //滚动时切换显示楼层

                                        if(!onOff) {

                                                $('.item').each(function(index, element) {

                                                        var _top = $(this).offset().top;

                                                        //当每层楼的最上面滚动到浏览器窗口的中间时切换导航条的显示

                                                        if(scTop >= _top - winHeight / 2) {

                                                                //此处添加active类样式并不是改变显示样式，而是为了标当前所在的楼层

                                                                $('#nav>li').eq(index).addClass('active').children().show()



                                                                        .end().siblings().removeClass('active').children().hide();



                                                        }



                                                });



                                        }



                                })



                                $('#nav>li').hover(function() {



                                        $(this).children().show();



                                }, function() {



                                        //此处用到.not('.active')来过滤当前楼层，鼠标移开时仍然保持当前的显示样式



                                        $(this).not('.active').children().hide();



                                }).on('click', function() {



                                        onOff = true; //将开关变量onOff置为true



                                        var index = $(this).index(), //获取当前电机的li的索引



                                                _top = $('.item').eq(index).offset().top; //获取相对于的楼层到文档顶部的距离



                                        $(this).addClass('active').children().show().end()



                                                .siblings().removeClass('active').children().hide();

                                        $('html,body').animate({

                                                'scrollTop': _top

                                        }, 400, function() {



                                                onOff = false; //在运动执行完毕的毁掉函数中将onOff的值重置为false



                                        });

                                });



                        });

以上是全部代码，下载源码，请点击》》 (, 下载次数: 0)