jquery网页定位导航特效 

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
    <meta charset="UTF-8">
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div id="content">
    <div id="floor1" class="item" >
    <h2>1F</h2>
    <ul>
        <li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/1.jpg" alt="未显示"></a></li>
    </ul>
    </div>
    <div id="floor2" class="item">
    <h2>2F</h2>
        <ul>
        <li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/2.jpg" alt="未显示"></a></li>
    </ul>
    </div>
    <div id="floor3" class="item">
    <h2>3F</h2>
    <ul>
        <li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/3.jpg" alt="未显示"></a></li>
    </ul>
    </div>
<div id="floor4" class="item">
<h2>4F</h2>
    <ul>
        <li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/4.jpg" alt="未显示"></a></li>
    </ul>
    </div>
    <div id="floor5" class="item">
    <h2>5F</h2>
    <ul>
        <li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
        <li><a href="#"><img src="image/5.jpg" alt="未显示"></a></li>
    </ul>
    </div>
    </div>
    <div id="fixed-tool">
    <ul>
        <li><a href="#floor1" class='current'>淘宝汇吃</a></li>
        <li><a href="#floor2">极有加</a></li>
        <li><a href="#floor3">格调</a></li>
        <li><a href="#floor4">中国质造</a></li>
        <li><a href="#floor5">亲宝贝</a></li>
    </ul>
    
    </div>
</body>
</html>
<!-- 锚点实现的快速定位: 通过a里面+#每层的id名字-->
* {
    margin: 0;
    padding: 0
}

body {
    font: normal 12/24px '宋体' arial;
}

.item {
    width: 364px;
    height: 382px;
    border: 1px solid #bfbfbf;
    margin-bottom: 20px;
    position: relative;
    left: 50%;
    margin-left: -200px;
}

.item h2 {
    width: 364px;
    font-size: 16px;
    font-weight: bold;
    background: blue;
    text-align: center;
}


/*#item ul{margin-left: 17px;margin-top: 20px;}*/

.item ul li {
    list-style: none;
    float: left;
    border: 1px solid #ccc;
    height: 120px;
}

.item ul li img {
    width: 120px;
    height: 120px;
}

#fixed-tool {
    position: fixed;
    left: 50%;
    margin-left: 300px;
    top: 100px;
}
#fixed-tool li{
    list-style: none;
}
#fixed-tool li a {
    padding: 5;
    display: block;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
    text-align: center;
    width: 40px;
    height: 40px;
    color: #f93;
}

.current{
    background: blue;
}


/*当margin:0 auto时，margin:left top right 之类的实效
居中显示left:50%;width: 400px;margin-left:-200px;

发现有多个a占据着120x16的高度，通过设置#item ul li高度使其直接占据。

margin:0 auto实效的原因
1.要给居中的元素一个宽度，否者无效。
2.该元素一定不能浮动，否者无效。*/
$(function() {
    // $('.fixed-tool ul li a').each(function() {
    //     $(this).bind('click', function() {
    //         var $li = $(this).parent();
    //         $li.addClass('current').siblings().removeClass('current');
    //     });
    // });
    $(window).scroll(function() {
        var top = $(document).scrollTop(); //屏幕滚动的距离
        // console.log(top);
        var $item = $('#content').find('.item'); //找到了div
        var $menu = $('#fixed-tool'); //找到了工具条
        var currentId = ''; //当前所在楼层的Id
        $item.each(function() {
            var m = $(this); //每个楼层所在的对象
            var itemTop = m.offset().top;//为每个楼层的高度
            //获取偏移 有左右
            // console.log(m.offset().top);
            if (top > itemTop-20) {//这里就解决了临界的问题
                currentId = '#' + m.attr('id');//如果大于当前楼层的高度，就把当前楼层的高度赋给currentId
            } else {
                return false;
                //如果已经找到了2,345就不用走了，直接跳出循环，提高效率
            }
        });
        var currentLink=$menu.find('.current');
        //如果top很低，则为空，后面的如果刚好为currentId时，就不需要取消
        if(currentId&&currentLink.attr('href')!=currentId){
            //1是当高度还很低，没达到时，使currentId为空,2是当前的current所对应的a的href属性不为本身时，
            currentLink.removeClass('current');//去掉不正确的样式
            $menu.find('[href="'+currentId+'"]').addClass('current');//找到正确的链接，加上样式
        }
    });
    // 滚动监听
});
// /jquery通过id获取到的效率比class高/
// 思路是当滚动的距离大于一个楼层的高度时，换到下一个楼层
//这里不需要添加点击事件的原因是，有锚点了。通过锚点的快速定位。

 

posted @ 2017-03-25 19:42  一米阳光!  阅读(1155)  评论(0)  编辑  收藏  举报