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

随机推荐

CentOS 7 挂载ntfs分区！
装好centos7发现可以看到分区,可是打不开,还是得用ntfs-3g 官网下好 http://www.tuxera.com/community/ntfs-3g-download/ 然后解压tar - ...
ASP.NET Core学习——前言
跌跌撞撞,公司的新项目终于要在这个月月底上线. 新项目使用ASP.NET Core来做,以前没接触过这方面的内容,只能一边学习,一边搞开发. 眼看项目上线在即,工作没那么忙,也不需要天天加班. 回想了 ...
PHP面试 PHP基础知识七（文件及目录处理）
文件操作文件打开函数 fopen()函数 //用来打开一个文件打开时需要指定打开模式语法:fopen( filename, mode, include_path, context); filen ...
树莓派 omv 安装 nextcloud
https://www.toutiao.com/i6447470450145493517/ https://www.technikaffe.de/anleitung-402-howto_nextclo ...
Redis和SpringBoot整合RedisUtils类
一.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
shell 检查文件夹是否包含文件，或者只是空文件
empty_dir_check(){ check_dir=$ if [ -d $check_dir ];then file_list=` -maxdepth -type f` if [ $file_l ...
touchWX使用 echarts
<button bindtap="init" wx:if="{{!isLoaded}}">加载图表</button> <butto ...
linux常用命令满足99%的开发需要
1.# 表示权限用户(如:root),$ 表示普通用户开机提示:Login:输入用户名password:输入口令用户是系统注册用户成功登陆后,可以进入相应的用户环境.退出当前shell,输入:exi ...
WdatePicker设置时间与倒计时
之前苦于jQuery的datetimepicker插件不知道如何设置秒数,用了同学推荐的WdatePicker,真心好用. 相关文档用法可以上http://www.my97.net/dp/index. ...
codeforces 24d Broken robot 期望+高斯消元
题目传送门题意:在n*m的网格上,有一个机器人从(x,y)出发,每次等概率的向右.向左.向下走一步或者留在原地,在最左边时不能向右走,最右边时不能像左走.问走到最后一行的期望. 思路:显然倒着算期望 ...

jquery网页定位导航特效

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

随机推荐

热门专题