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 ...

随机推荐

php开发面试题---php面向对象详解（对象的主要三个特性）
php开发面试题---php面向对象详解(对象的主要三个特性) 一.总结一句话总结: 对象的行为:可以对对象施加那些操作,开灯,关灯就是行为. 对象的形态:当施加那些方法是对象如何响应,颜色,尺寸 ...
thinkphp5.0多条件模糊查询以及多条件查询带分页如何保留参数
1,多条件模糊查询等于:map[‘id′]=array(‘eq′,100);不等于:map[‘id′]=array(‘eq′,100);不等于:map[‘id’] = array(‘neq’,100 ...
jdk tomcat的项目版本一致操作
操作jdk版本以及tomcat版本:右键项目--buildpath--configure buildpath...---project Facets---libraries---add/选中remov ...
arttemplate02
1.后台传来的数据 { "code": 200, "checkRecords": [ { "id": "402881e75cc80 ...
Servlet源码分析
Servlet API的核心就是javax.servlet.Servlet接口,所有的Servlet 类(抽象的或者自己写的)都必须实现这个接口.在Servlet接口中定义了5个方法,其中有3个方法是 ...
拾遗：使用 systemd-journald 管理 Docker 容器日志
在 docker.service 文件中的 ExecStart 字段中,添加(或:docker run --log-driver=journald): --log-driver=journald \ ...
redis-trib.rb创建集群失败
yum安装ruby: yum install -y rubyyum install -y rubygems //安装rubygemgem install redis //安装redis的接口包gem ...
C#获取系统服务+进程+启动时间
原文:C#获取系统服务+进程+启动时间版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/weixin_38208401/article/details ...
《代码大全2》读书笔记 Week4
<代码大全2>第8章:防御式编程防御式编程的主要思想是子程序应该不因为非法的输入值被破坏,就好比开车时的防御式驾驶:你无法预估其他司机将会做什么,但你要采取措施保证当他人做出危险动作时自 ...
转载:mysql sql_safe_updates 分析
今天看到一个很实用的功能,mysql_safe_updates. 只是对功能做了转载,具体原理可以看一下 delete from table t where true ; update t set c ...

jquery网页定位导航特效

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

随机推荐

热门专题