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="data:image/1.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>

    </ul>

    </div>

    <div id="floor2" class="item">

    <h2>2F</h2>

        <ul>

        <li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>

    </ul>

    </div>

    <div id="floor3" class="item">

    <h2>3F</h2>

    <ul>

        <li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>

    </ul>

    </div>

<div id="floor4" class="item">

<h2>4F</h2>

    <ul>

        <li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>

    </ul>

    </div>

    <div id="floor5" class="item">

    <h2>5F</h2>

    <ul>

        <li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>

        <li><a href="#"><img src="data: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:;

    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:;

    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高/

// 思路是当滚动的距离大于一个楼层的高度时，换到下一个楼层

//这里不需要添加点击事件的原因是，有锚点了。通过锚点的快速定位。

jquery网页定位导航特效的更多相关文章

[Jquery]网页定位导航特效
描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离( ...
JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
jQuery实现网页定位导航
代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title ...
慕课网中网页定位导航中js相关问题总结
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
jQuery Tocify 定位导航
Tocify是一个jQuery插件,能够动态的生成文章目录,Tocify可以随意的设置Twitter Bootstrap 或者 jQueryUI Themeroller支持的可选动画和jQuery的显 ...
jQuery实现电梯导航特效
功能描述: 当滚动条滑到某个位置时,显示电梯导航: 当用户滚动滚动条时,让电梯导航的选中状态和当前滚动到的区域保持一致: 当用户点击电梯导航时,滚动条滚动到被点击导航对应的区域准备工作: 首先将jQ ...
JavaScript定位导航滚动2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
纯CSS + 媒体查询实现网页导航特效
纯css+媒体查询实现网页导航特效附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

随机推荐

NX二次开发-基于NX开发向导模板的NX对Excel读写操作(OLE方式(COM组件))
在看这个博客前,请读者先去完整看完:NX二次开发-基于MFC界面的NX对Excel读写操作(OLE方式(COM组件))https://ufun-nxopen.blog.csdn.net/article ...
找关键字,分割字符串,输出一个vector
vector<string> split(const string& str, const string& delim) { vector<string> re ...
KMP概念上小结
kmp算法的时间复杂度是O(m+n) 主要作用: 1.最长公共前后缀问题 2.原串中含有几个模式串问题 3.循环节问题
Java中的注解是如何工作的？
自Java5.0版本引入注解之后,它就成为了Java平台中非常重要的一部分.开发过程中,我们也时常在应用代码中会看到诸如@Override,@Deprecated这样的注解.这篇文章中,我将向大家讲述 ...
web前端Vue+Django rest framework 框架生鲜电商项目实战✍✍✍
web前端Vue+Django rest framework 框架生鲜电商项目实战整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...
MVC--MVP?
第一部分:什么是MVP?什么是MVC? 1.什么是MVP? M:数据层(数据库.网络.文件存储等等...) V:View和Activity和Fragment以及它们的子类 P:中介->Prese ...
Spring接收数据，传递数据
Spring接收数据,传递数据前提配置 POM <dependency> <groupId>org.springframework</groupId> < ...
Vue报错type check failed for prop
在报错的'value'属性前面加:或者去掉:即可解决问题.
shell脚本输出空心等腰三角形
第一种:(for循环) #!/bin/bash#空心等腰三角形arr=9 #定义金字塔的层数for ((i=1;i<=$arr;i++))do for ((j=1;j<=$(($arr-$ ...
启动eclipse出现JVM terminated. Exit code=127 错误解决办法
https://blog.csdn.net/wpzsidis/article/details/72954387 进去第二次又错

jquery网页定位导航特效

jquery网页定位导航特效的更多相关文章

随机推荐

热门专题