慕课网中网页定位导航中js相关问题总结

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>地狗购物网——网页定位导航效果</title>

<style>

        * {

            margin: 0;

            padding: 0;

        }

        body {

            font-size: 12px;

            line-height: 1.7;

        }

        li {

            list-style: none;

        }

        #content {

            width: 800px;

            margin: 0 auto;

            padding: 20px;

        }

        #content h1 {

            color: #0088bb;

        }

        #content .item {

            padding: 20px;

            margin-bottom: 20px;

            border: 1px dotted #0088bb;

        }

        #content .item h2 {

            font-size: 16px;

            font-weight: bold;

            border-bottom: 2px solid #0088bb;

            margin-bottom: 10px;

        }

        #content .item li {

            display: inline;

            margin-right: 10px;

        }

        #content .item li a img {

            width: 230px;

            height: 230px;

            border: none;

        }

        #menu {

            position: fixed;

            top: 100px;

            left: 50%;

            margin-left: 400px;

            width: 80px;

        }

        #menu ul li a {

            display: block;

            margin: 5px 0;

            font-size: 14px;

            font-weight: bold;

            color: #333;

            width: 80px;

            height: 50px;

            line-height: 50px;

            text-decoration: none;

            text-align: center;

        }

        #menu ul li a:hover,

        #menu ul li a.current {

            color: #fff;

            background: #0088bb;

        }

        /*ie6 hack*/

        * html, * html body {

            background-image: url(about:blank);

            background-attachment: fixed;

        }

        * html #menu {

            /*position: fixed;*/

            position: absolute;

            top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');

        }

</style>

<script>

  //定义getByClassName函数，让函数实现根据class name获取对象并返回

function getByClassName(obj,cls){

    var elements=obj.getElementsByTagName("*");

    var result=[];

    for(var i=0;i<elements.length;i++){

        if(elements[i].className==cls){

            result.push(elements[i]);

        }

    }

    return result;

    }

//    用removeAttribute,setAttribute属性之后，这三个函数都不需要啦

    function hasClass( obj, cls ){

        return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));

    }

    function removeClass( obj, cls ){

        if( hasClass( obj, cls )){

            //remove

            var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");

            obj.className = obj.className.replace(reg, "");

        }

    }

    //定义addClaass函数，让函数实现给对象增加class

    function addClass(obj,cls){

        if(!hasClass( obj, cls )){

        obj.className+=""+cls;

        }

    }

    window.onload = function(){ 

        window.onscroll = function(){

            var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;

            var menus = document.getElementById("menu").getElementsByTagName("a");

            var items = getByClassName(document.getElementById("content"), "item");

            var currentId = "";

            for ( var i=0; i< items.length; i++ ){

                var _item = items[i];

                var _itemTop = _item.offsetTop;

                if( top > _itemTop - 200 ){

                    currentId = _item.id;

                } else {

                    break;

                }

            }

      //请补充此处代码，给正确的menu下的a元素class赋值current

      if(currentId){

          for(var i=0;i<menus.length;i++){

             var  _menu=menus[i];

             var _href=_menu.href.split("#");

             if(_href[_href.length-1]!=currentId){

                // removeClass(_menu,"current");

                _menu.removeAttribute("class","current");

             }

             else{

                // addClass(_menu,"current");

                 _menu.setAttribute("class","current");

             }

          }

      }

    }

}

</script>

</head>

<body>

<div id="menu">

<ul>

<!--运用锚点，实现导航定位。-->

<li><a href="#item1" class="current">1F 男装</a></li>

<li><a href="#item2">2F 女装</a></li>

<li><a href="#item3">3F 美妆</a></li>

<li><a href="#item4">4F 数码</a></li>

<li><a href="#item5">5F 母婴</a></li>

</ul>

</div>

<div id="content">

<h1>地狗购物网</h1>

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

<h2>1F 男装</h2>

<ul>

<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>

</ul>

</div>

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

<h2>2F 女装</h2>

<ul>

<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>

</ul>

</div>

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

<h2>3F 美妆</h2>

<ul>

<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>

</ul>

</div>

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

<h2>4F 数码</h2>

<ul>

<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>

</ul>

</div>

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

<h2>5F 母婴</h2>

<ul>

<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>

<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>

</ul>

</div>

</div>

</body>

</html>

图为改进后的代码

1.js中ie8及以下浏览器不支持getElementsByClassName,

(1)JS原生代码里addClass添加类,要带空格

举例子：

上面是一个div，这个div的样式已经有两个，所以你再添加class的时候就需要加空格后再加入新的样式。

最后得到： <div class="item1 item2 new"> </div>

(2)移除类：不能直接让 obj.className="";因为一个对象可能有很多类。要用如下空格替换要移除的正则表达式。

obj.className = obj.className.replace(reg, "");

2.var result = [ ];定义一个空数组。

3.window.onscroll = function(){}; 当窗口滚动时，那么执行以下函数。如果没有这一行，那么，窗口滚动没有触发任何的函数，相当于没用。window.scroll就是触发窗口滚动事件。

4._menu的href属性也可以直接用getAttribute('href') _menu.getAttribute('href')

js可以用 setAttribute('class','className')

慕课网中网页定位导航中js相关问题总结的更多相关文章

JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
jQuery实现网页定位导航
代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title ...
自己做的网页页面导航浏览JS/JQuery_版本2（优化边缘）
版本2增加了宽宽的边界,边界内鼠标也可以导航.边界对应这HTML页面的边界.目前右下角有时会导致功能失效.版本1. 这次找了个更好的例子,实践中产生这个需求的真实例子,点我Demo. 需求: 版本1: ...
自己做的网页页面导航浏览JS/JQuery
需求: 当页面是由一个巨大的表格构成时,浏览器自动会出现纵向和横向滚动条,这时用户浏览页面会出现很蛋疼的感受,那就是恶心的横向滚动条! 为了减缓这种蛋疼的感觉,我尝试做了这个导航器(不知道如何称呼), ...
jquery网页定位导航特效
<!DOCTYPE html> <html lang="en"> <head> <script src="http://code ...
[Jquery]网页定位导航特效
描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离( ...
慕课网__CSS_网页图标制作
参考地址:http://www.flowerboys.cn/font/article/fontsArticle/how-to-turn-your-icons-into-a-web-font.html
JS实现选择菜单栏（配合慕课网淘宝搜索框的课程）
以下是关于实现慕课网淘宝搜索框的JS代码,不过只有选择菜单栏(其余比较容易实现). <!doctype html> <html> <head> <!--在IE ...
Python爬虫之爬取慕课网课程评分
BS是什么? BeautifulSoup是一个基于标签的文本解析工具.可以根据标签提取想要的内容,很适合处理html和xml这类语言文本.如果你希望了解更多关于BS的介绍和用法,请看Beautiful ...

随机推荐

noip模拟赛业务办理
[问题描述]在银行柜台前,有 n 个顾客排队办理业务. 队伍中从前往后,第 i 位顾客办理业务需要ti 分钟时间. 一位顾客的等待时间定义为:队伍中在他之前的所有顾客和他自己的办理业务时间的总和.第 ...
Bellman_ford 算法 Currency Exchange POJ1860
Bellman_ford算法用于寻找正环或者负环! 算法导论: 24.1 The Bellman-Ford algorithm The Bellman-Ford algorithm solves th ...
Ubuntu 16.04安装设备管理器Hardinfo和lshw设备信息命令
安装: sudo apt-get install hardinfo 启动: 实际上这些信息都可以通过lshw进行查看,参考:https://linux.die.net/man/1/lshw
pga_aggregate_target, sga_target, memory_target
对于这三个参数有一些了解,但是又有一些疑惑. pga_aggregate_target 最初的了解: 这个参数控制着PGA的大小,如果work_area_policy 设置成auto,则oracle采 ...
Json解析工具Jackson（使用注解）--jackson框架自定义的一些json解析注解
Json解析工具Jackson(使用注解)--jackson框架自定义的一些json解析注解 @JsonIgnoreProperties 此注解是类注解,作用是json序列化时将Javabean中的一 ...
php 类型转换
PHP数据类型转换 PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: •(int).(integer):转换成整形 •(float).(double).(real):转换成浮点型 •(s ...
FTP用户-禁止登录系统
OS是Ubuntu 11.10. 1. which nologin #/usr/sbin/nologin 2. vim /etc/shells #在该文件后添加/usr/sbin/nolo ...
VM Workstation 虚拟机安装Ghost XP教程
1 工具和软件准备 VM Workstation虚拟机软件(必须) http://pan.baidu.com/share/link?shareid=304385&uk=637999033 ...
hdu5396 Expression 区间dp +排列组合
#include<stdio.h> #include<string> #include<map> #include<vector> #include&l ...
hdu 4549 M斐波那契数列（矩阵高速幂，高速幂降幂）
http://acm.hdu.edu.cn/showproblem.php?pid=4549 f[0] = a^1*b^0%p,f[1] = a^0*b^1%p,f[2] = a^1*b^1%p... ...

慕课网中网页定位导航中js相关问题总结

慕课网中网页定位导航中js相关问题总结的更多相关文章

随机推荐

热门专题