html教學

用css+js实现自动伸缩导航栏_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:57 AM

作者的话

偶然一个机会，在网上看到一篇ted公开课【让我们教孩子编程吧】里面有一个实例，说是一个小男孩制作了一个大鱼吃小鱼的游戏，他想为这个游戏做一个计分板（吃一条鱼加一分），便他在网上求教，后来被网站创作者发现后，告诉了他答案：变量。通过这个学到的知识点【变量】也许小男孩永远不会忘记。

从中可以看出，通过需求学习编程往往比为了学编程而学习编程要记得更劳并且更有价值。这也对我之后的学习以及写作产生的改变。

PS:以下代码每次只写出有更改的地方，无更改的地方不再赘述。每一部分的格式都是:效果图——思路——代码的顺序书写，目的是希望初学者可以根据效果图，辅以思路试着自己写出代码，最后再与作者的代码作比较，希望能通过这个方法明白，实现效果的方式是多种多样的，不要只局限在作者的思路中，当然最重要的是能锻炼自己编写代码的能力。

任务概述

需要达到的效果

task goal_1

task goal_2

默认首页选中样式；
设置鼠标滑过效果：颜色变化(#f60)，宽度变化,字体变化。

所涉及知识点

布局：float；
css：元素状态切换(display)，盒模型(margin,padding)，圆角边框(border-radius),可见宽(offsetWidth)；3.JavaScript:匿名类，for循环，通过标签获得元素(getElementsByTagName), 方法自动间隔运行(setInterval/clearInterval)。

基本架构

这是一个没有任何css修饰的html代码

无序列表:

,是与导航栏语义比较贴切的标签，然后将标签放到

内部即可实现导航栏html部分。

<ul class="nav" >        <li><a href="#">首    页</a></li>        <li><a href="#">新闻快讯</a></li>        <li><a href="#">产品展示</a></li>        <li><a href="#">售后服务</a></li>        <li><a href="#">联系我们</a></li>    </ul>

这是导航栏默认样式，我们通过css进行初步修改

样式修改

取消默认样式

把浏览器默认的盒模型值，列表样式以及链接样式的默认样式取消，并且把字体颜色改成黑色。

    *{margin: 0;padding: 0;          font-size: 14px;}    li{list-style: none;}    a{text-decoration: none;           color: #000;}

设置骨架

通过将设置成块状标签，即可达到给设置宽高的目的；
通过float：left使导航栏从纵向排列变成横向排列；
通过将line-height属性设置的跟height一样，实现导航栏文字垂直居中；
通过text-aligin将导航栏文本水平居中。

li{list-style: none;float:left;}li a{display:block;width: 100px;     height: 30px;line-height: 30px;     text-aligin:center;    }

颜色以及细节修改

设置导航栏默认颜色，并且通过margin属性是导航标签产生间隔。
将导航栏四个角通过border-radius设置成圆角。
通过给属性设置class=on，以及伪类选择器a:hover将【首页】和【鼠标滑过】的样式颜色设置为#f60，字体颜色设置为白色。

li a{display:block;width: 100px;      height: 30px;line-height: 30px;      background-color: #efefef;      margin-left:1px;}.on,.nav li a:hover{    background-color: #f60;     color: #fff;}

设置导航栏的“脚”

1.通过border-bottom属性制作导航栏的“脚”；

要知道我们已经将
设置成了float，因此它已经脱离了文本档，那么其父元素的默认height值也就为0，需要自己设定；3.通过margin,padding属性移动导航栏主体部分。

ul{height:50px;    border-bottom:5px solid #f60;    padding-left:20px;}li{margin-top:20px;}

鼠标划过改变行高

通过hover设置鼠标划过后的行高2.此时会发现导航栏向下移动了，通过将margin设置为负值，向上移动。

.on,.nav li a:hover{   height: 40px;   line-height: 40px;   margin-top: -10px;}

以上是css部分，下面讲JavaScript。

鼠标划过自动伸缩

分为两部分来写：自动伸和自动缩

鼠标划过自动伸

效果：鼠标划过导航栏自动延伸。

首先要获得标签元素，可以通过getElementsByTag；
要给每一个标签设置，可以通过for循环遍历；
鼠标划过事件通过 onmouseover设置；
在方法里通过var变量获得当前标签元素。
设置自动延伸，可以通过setInterval方法，让方法以固定的时间为间隔，反复执行；
此时导航栏会无限延伸，通过if设置条件，设置导航栏延伸停止时机。

window.onload=function(){    var aA=document.getElementsByTagName("a");    for(var i=0;i<aA.length;i++){        aA[i].onmouseover=function(){            var This=this;            clearInterval(This.time);//初始化            This.time=setInterval(function(){                This.style.width=This.offsetWidth+8+"px";                    if(This.offsetWidth>=150){                    clearInterval(This.time)                    }                },30);            }        }    }

鼠标离开自动缩

最终图片，与文章开头图片相同效果：鼠标离开导航栏自动缩到原始状态。

思路同上，只是数值相反。

aA[i].onmouseout=function(){    var This = this;    clearInterval(This.time);//初始化        This.time=setInterval(function(){        This.style.width=This.offsetWidth-8+"px";            if(This.offsetWidth<=100){                clearInterval(This.time);            }        },30);    }}

最终代码

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">    <title>导航栏v1.0</title>    <style type="text/css">        /*@group general style*/        *{margin: 0;padding: 0;font-size: 14px;}        a{color: #333;text-decoration: none;}        ul{            list-style: none;border-bottom: 5px solid #f60;height: 50px;            padding-left: 30px;        }        li{            margin-top:20px;            float: left;}        /*@group overrides*/        .nav li a{            display: block;            text-align: center;            height: 30px;            line-height:30px;            width: 120px;            background-color: #efefef;                        border-radius: 5px;        }        .nav .on,.nav li a:hover{            color: #fff;            background-color: #f60;            height: 40px;            line-height: 40px;            margin-top: -10px;        }    </style></head><body>    <ul class="nav" >        <li><a class="on" href="#">首    页</a></li>        <li><a href="#">新闻快讯</a></li>        <li><a href="#">产品展示</a></li>        <li><a href="#">售后服务</a></li>        <li><a href="#">联系我们</a></li>    </ul>    <script type="text/javascript">    window.onload=function(){        var aA=document.getElementsByTagName("a");        for(var i=0;i<aA.length;i++){            aA[i].onmouseover=function(){                // 设置方法停止的时机                clearInterval(this.time);                // 此处this为当前a标签                var This=this;                // 设置方法每30毫秒运行一次                // 其中offsetWidth:对象的可见宽度，包括本身width+padding-border                // 当offsetWidth>=120时，程序停止。                This.time=setInterval(function(){                    This.style.width=This.offsetWidth+8+"px";                    if(This.offsetWidth>=160){                    clearInterval(This.time);                }                },30);            }            aA[i].onmouseout=function(){                clearInterval(this.time);//初始清理                var This=this;                This.time=setInterval(function(){                    This.style.width=This.offsetWidth-8+"px";                    if(This.offsetWidth<=120){                        clearInterval(This.time);                    }                },30);            }            }    }    </script></body></html>

注：此项目灵感来自慕课网

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract