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

随机推荐

Java方法中形参能否改变实参
前几天学习了java中的参数传递机制,总结了一些知识点: 1·参数类型为基本数据类型:整型:byte,short,int,long ,浮点型:float,double ,字符型:char ,布尔型:b ...
使用CSS将图片转换成黑白(灰色、置灰) & 毛玻璃效果
法1⃣️: IE浏览器: filter: gray; 其他浏览器: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(10 ...
Java8中Map的遍历方式总结
在这篇文章中,我将对Map的遍历方式做一个对比和总结,将分别从JAVA8之前和JAVA8做一个遍历方式的对比,亲测可行. public class LambdaMap { private Map< ...
Redis数据结构之压缩列表-ziplist
为了节约内存,在zset和hash容器对象元素个数较少时,Redis会采用压缩列表(ziplist)进行存储. 压缩列表是一块连续的内存空间,元素之间紧挨着存储,不存在冗余一个压缩列表可以包含任意多 ...
在vue中使用高德地图开发，以及AMap的引入？
百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ? 1.首先在 externals: { "BMap": "BMap& ...
vue中：key 和react 中key={} 的作用，以及ref的特性？
vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性一句话概括就是 ...
使用Kettle的命名参数动态执行作业
关于如何根据传入的不同参数,达到动态运行作业的目的,这里不介绍.只提供一个思路,就是不同的调度进程调度同一个Kettle文件时,传入了不同的参数,从而得到不同的数据. 如下图所示: 1. 先设置参数名 ...
angulatJs 前端数据分页展示——例
注:css用的是amazeui html: ···<div style="height:500px;overflow: auto;"> <table class= ...
AF_UNIX
3.SOCK_SEQPACKET SOCK_SEQPACKET提供一个顺序确定的,可靠的,双向基于连接的socket endpoint. 与SOCK_STREAM不同的是,它保留消息边界.(表明发送两 ...
Vue-cli开发笔记一----------项目的结构
配置文件package.json: 搜索了配置的原理:https://segmentfault.com/a/1190000000344102 里面讲到:npm会在package.json文件中找scr ...

jquery网页定位导航特效

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

随机推荐

热门专题