js制作点击会自动隐藏的导航栏（固定在在头部的）

浏览数：20 / 时间：2015年06月09日

想必大家应该见过这样的特效，本来头部是固定在网页的最上方的，点一下缩进去，再点一下

又可以缩回来，这种效果怎么实现的呢，我今天就做了一个。菜鸟勿喷。

@charset "utf-8";
/* CSS Document */

.main
{
    width:1024px;
    height:768px;
    
}

#header
{
    width:inherit;
    height:100px;
    background:url(indexBar.jpg) no-repeat top left;
    margin-top:-5px;
    position:fixed;
    top:0;
    left:0;
    filter:alpha(Opacity=85);
    opacity:0.85;
    
}

.h_left
{
    float:left;
    margin-left:20px;
    margin-top:35px;
    
}

.h_right
{
    float:right;
    margin-right:80px;
    margin-top:20px;
    
}

.clear
{
    clear:both;
    
    
    
}

.h_right ul li
{
    display:inline-block;
    vertical-align:middle;
    padding-left:10px;
    letter-spacing:1px;
}

.others
{
    width:inherit;
    height:120%;
    border:2px solid red;
    
    
}

.h_right div
{
    float:right;
    
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="index.css" type="text/css" />

</head>

<body>


<div class="main" id="main">

<!-- 头部导航-->
<div class="header" id="header">

<div class="h_left">用户名：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码：
<br />
<p style="margin-top:12px;">
    Welcome~~~~~
</p>
</div>

<div class="h_right">
    <ul>
        <li>菜单测试</li>
        <li>菜单测试</li>
        <li>菜单测试</li>
    </ul>
<div id="exit">
<a href="#" onClick="exit1();">Close Windows~~~Have Fun~~~</a>

</div>
</div>

</div>
<script type="text/javascript" src="index.js"></script>
<div class="clear"></div>

<div class="others">
<p>
抒情

注重表现作者的思想感受，抒发作者的思想感情的散文。这类散文有对具体事物的记叙和描绘，但通常没有贯穿全篇的情节，其突出的特点是强烈的抒情性。它或直抒胸臆，或触景生情，洋溢着浓烈的诗情画意，即使描写的是自然风物，也赋予了深刻的社会内容和思想感情。优秀的抒情散文感情真挚，语言生动，还常常运用象征和比拟的手法，把思想寓于形象之中，具有强烈的艺术感染力。例如：茅盾的《白杨礼赞》、魏巍的《依依惜别的深情》、朱自清的《荷塘月色》、冰心的《樱花赞》、当代作家田茂泉的《哦，棋山》。
写景

以描绘景物为主的散文。这类文章多是在描绘景物的同时抒发感情，或借景抒情，或寓情于景，抓住景物的特征，按照空间的变换顺序，运用移步换景的方法，把观察的变化作为全文的脉络。生动的景物描绘，不但可以交代背景，渲染气氛，而且可以烘托人物的思想感情，更好的表现主题。例如：刘白羽的《长江三峡》。
哲理

哲理，是感悟的参透，思想的火花，理念的凝聚，睿智的结晶。它纵贯古今，横亘中外，包容大千世界，穿透人生社会，寄寓于人生百态家长里短，闪现在思维领域万千景观。 高明的作者，善于抓住哲理闪光的瞬间，形诸笔墨，写就内涵丰厚、耐人寻味的美文。时常涵咏这类美文，自然能在潜移默化中受到启迪和熏陶，洗礼和升华，这种内化作用无疑是巨大的。
哲理散文以种种形象来参与生命的真理，从而揭露万物之间的永恒相似，它因其深邃性和心灵透辟的整合，给我们一种透过现象深入本质、揭示事物的底蕴、观念具有震撼性的审美效果。把握哲理散文体现出的思维方式，去体悟哲理散文所蕴藏的深厚的文化底蕴和文化积淀。
1.哲理散文中的象征思维：哲理散文因为超越日常经验的意义和自身的自然物理性质，构成了本体的象征表达。它摒弃的是浅薄，而是达到一种与人的思想情性相通、生命交感、灵气往来的境界，我们从象征中获得理性的醒悟和精神的畅快，由心灵的平静转到灵魂的震颤，超越一般情感反应而居于精神的顶端。
2.哲理散文的联想思维：由于哲理散文是个立体的、综合的思维体系，经过联想，文章拥有更丰富的内涵，不至于显得单薄，把自然、社会、人生多个角度进行了融合。
3.哲理散文中的情感思维：哲理散文在本质意义上是思想表达对情感的一种依赖。“外师造化，中得心源”，由于作者对生活的感悟过程中有情感参与，理解的结果有情感及想象的融入，所以哲理散文中的思想，就不是一般干巴巴的议论，而是寓含了生活情感的思想，是蘸满了审美情感液汁的思想。从哲理散文的字里行间去读解到心智的深邃，理解生命的本义。这就是哲理散文艺术美之所在。
3理论名词
编辑

概念

散文是指以文字为创作、审美对象的文学艺术体裁，是文学中的一种体裁形式。　六朝以来，为区别于韵文、骈文，而把凡是不押韵、不重排偶的散体文章，概称散文。随着文学概念的演变和文学体裁的发展，散文的概念也时有变化，在某些历史时期又将小说与其他抒情、记事的文学作品统称为散文，以区别于讲求韵律的诗歌。现代散文是指除小说、诗歌、戏剧等文学体裁之外的其他文学作品。其本身按其内容和形式的不同，又可分为杂文、小品、随笔等。散文形散而神不散，有一个明确的主旨贯穿全文。
特点

短小优美，生动有趣。它的历史可以追溯到甲骨文，是和诗歌、戏剧、小说并列的文学体裁；它包括政论、史论、传记、游记、书信、日记、奏疏、小品、表、序等各体论说、杂文， 是语言艺术文学体裁的典范，并具有很高的审美价值，在长期流传过程中，它浇灌了各个时代的文学园地，也灌溉了历代文人，至今仍使人们受益。
散文是“集诸美于一身”的文学体裁。文学是表达人生和传达思想感情的。通常来说，小说、诗歌、戏剧无论是在结构上，还是在格律、剪裁、对话等安排布局上，都有很严格的要求：而散文，却可以自由些，看起来只是不经意地抒写着一己的经历和感受，所表现的多是零星杂碎的片段人生。语言诗意优美。
散文主要分叙事性散文、抒情散文、哲理散文、议论性散文。
4基本介绍
编辑

古代

殷商时代有了文字，也就有了记史的散文。到了周朝，各诸侯国的史官进一步以朴素的语言、简洁的文字记录列国间的史实，如《春秋》。随着时代的需求，产生了描述现实的历史文学，有了《左传》、《国语》、《战国策》等历史著作。
《左传》是《春秋左氏传》的简称，又名《左氏春秋》，相传是春秋末年鲁国的史官左丘明所著，共18万字，记载了春秋240年间列国的政治、军事、外交活动和言论以及天道、鬼神、灾祥、占卜之事。这部书叙事富于戏剧性，情节紧凑，战事描写尤为出色，语言精炼，富于形象。
《国语》是国别史，分别记载了周王朝及诸侯各国（BC990——BC353）之事，记言多于记事，所记大多为当时较有远见的开明贵族的话。
《战国策》作者不可考，现版本为西汉刘向辑成。同《国语》一样，也是分国记事，记载了西、东周及秦、齐、楚、赵等诸国之事，内容是谋臣策士的种种活动及辞说。《战国策》文章的特点是长于说事，善用比喻，人物形象塑造极为生动。
先秦历史散文为中国的历史文学奠定了基础，对后世历史家和古文家都产生了极为深远的影响。
春秋战国之交是社会大变革的时代，各种学术流派纷纷著书立说，争论不休，形成百家争鸣的局面。代表不同阶级或阶层的思想家的著作，促进了说理散文的发展。这些思想家有儒家、墨家、道家、法家等。记载他们言论的书流传的有《论语》、《孟子》、《墨子》、《庄子》、《韩非子》等。
《论语》和《孟子》是儒家诠释“仁”的著作。《论语》是记录孔丘及其弟子言行的，其中多半是简短的谈话和问答。《孟子》是记载孟轲言论的。孟轲长于辩论，因此书中语言明快，富于鼓动性。
《墨子》代表墨翟“喜爱”的主张，语言朴素，说理明确，逻辑性很强，《兼爱》、《非攻》等篇极有代表性。
《庄子》代表道家庄周“无为而治”的主张。庄子散文在诸子中独具魅力。这表现在作者具有奇幻的想象力和敏锐的观察力，善用民间寓言，长于譬喻，使文章富于文学趣味。
《韩非子》代表法家“因时制宜”的主张。韩非散文结构严谨，锋芒锐利，说理深刻。
《荀子》代表荀况的学说，现有32篇，多长篇。荀子散文特点：论点明确、层次清楚、句法整练、词汇丰富。
《吕氏春秋》是秦丞相吕不韦门客的集体创作。它包括八览、六论、十二纪，兼有儒、道、墨、法、农诸家学说。书中保留了大量先秦时代的文献和佚事。它是一种系统化的、集合许多单篇的说理文，层层深入，最见条理。和诸子散文一样，它往往以寓言故事为比喻，因而文章富于形象性。
先秦诸子的说理散文无论在思想上，还是在艺术风格上，都对后世散文的发展产生了显而易见的影响。
汉初，政论散文有所发展。贾谊（西元前200——前168）是西汉初年杰出的文学家，他的文章《过秦论》总结了秦代灭亡的原因，汲取了秦末农民起义的教训，发展了先秦的民本思想。他的散文善用比喻，语言富于形象性。
除贾谊外，汉初还有不少散文家，他们的文章大多或论秦之得失，或针对时弊，提出自己的主张，其中以晁错和邹阳成就较高。晁错以主张募民备塞的《守边劝农疏》、《论贵粟疏》两篇散文最为著名。
汉武帝时，罢黜百家，独尊儒术，封建王朝迫切需求总结古代文化，给予大一统的统治局面以哲学和历史的解释，司马迁的《史记》应运而生。它的出现将先秦历史散文又大大向前发展了一步。在《史记》的影响下，东汉产生了不少历史散文著作，班固的《汉书》便是其中的杰出代表。
汉代出现了一种新的文体“赋”。赋的名称始于战国赵人荀卿的《赋篇》，到后代形成了特定的体制。讲究文采、韵节，兼具诗歌和散文的双重性质。接近散文的称“文赋”，接近于骈文的称“骈赋”。汉初贾谊的《吊屈原赋》、《鹏鸟赋》；司马相如（前179—前127）的《子虚》、《上林》；西汉末年杨雄（公元前53—18）的《甘泉赋》、《羽猎赋》、《长杨赋》、《河东赋》；班固的《两都赋》；东汉张衡（78—139）的《二京赋》，都是汉赋的名篇。
魏晋南北朝时期，骈文盛行，散文衰落。但在郦道元的《水经注》和杨衡之的《洛阳伽蓝记》等学术著作中仍有一些质朴的叙事、抒情、写景的优美文字。
唐朝韩愈大力反对浮华的骈俪文，提倡作古文，一时从者甚众，后又得柳宗元大力支持，古文创作业绩大增，影响更大，成为文坛的主要风尚，文学史上称其为古文运动。以韩柳为首的古文运动的胜利，树立了一种摆脱陈言俗套，自由抒写的新文风，大大提高了散文的抒情、叙事、议论、讽刺的艺术功能。
中唐以后，古文运动一度衰落，到了宋代，欧阳修再一次掀起了古文运动，此后的王安石、曾巩、苏轼、苏洵、苏辙等人都在古文革新运动的影响之下取得了各自的成就，后人将他们与唐代韩愈、柳宗元合称为“唐宋八大家”。
北宋的历史文学家司马光编有一部历史巨著《资治通鉴》，它除具有史学价值外，还非常具有文学价值。
南宋散文家在北宋诸位大家影响下，产生了一部分上书言事的政论文，表现了作者鲜明的政治态度，胡铨、陈亮、叶适是这方面的代表作家。古文运动的成功，使散文更切合实用，南宋时大量出现的笔记杂文便是一个明证。洪迈的《容斋随笔》、王明清的《挥尘录》是笔记杂文中的佳作，此外，朱熹（1130—1200）的古文长于说理，造诣非浅。
明初的宋濂（1310—1381）是“开国文臣之首”，他的一部分传记文很有现实意义，比较著名的作品有《秦士录》、《王冕传》、《李疑传》等。明中叶以后，针对程朱理学、八股文的束缚，以李梦阳、何景明为首的前七子发起“复古运动”，倡导文必秦汉。他们在对扫荡八股文风起到一定积极作用的同时，又走上了盲目模拟古人的路子。后来的李攀龙、王世贞为代表的“后七子”复古运动，也再一次重复了他们的错误。
归有光等“唐宋派”首先起来反对复古派，进而是万历年间的公安派也加入猛烈抨击拟古主义的队伍。
公安派以袁宗道、袁宏道、袁中道为代表，时称“三袁”，袁宏道（1568--1610）最为著名。他们认为不同的时代有不同的文学，因此反对贵古贱今，模拟古人。袁宏道更出于作家的主观要求提出了“性灵说”。公安派的散文创作特点是：冲破传统古文的陈规旧律，自然流露个性，语言不事雕琢。
与公安派存在的同时还有以钟惺、谭元春为代表的竟陵派，他们也主张独抒性灵。
这样一篇典型作品。
</p>
</div>

</div>


</body>
</html>

// JavaScript Document


var main=document.getElementById("main");
var header=document.getElementById("header");
var exit=document.getElementById("exit");


var headerDiv=null;
var timer=null;
var temp=null;
//让方法实现动态滚动效果



header.addEventListener("click",scrollDivDown);
header.addEventListener("click",scrollDiv);
header.addEventListener("click",timeCal);


//向上滚动
function scrollDiv()
{

temp--;

header.style.top=temp+‘px‘;


}

//向下滚动
function scrollDivDown()
{

    temp++;
    header.style.top=temp+‘px‘;
    
    
}


//滚动
function timeCal()
{

//如果top中有-号的话，向下滚动，否则向上滚动
if(header.style.top.indexOf("-")!=-1)
{    
    timer=setInterval(scrollDivDown,20);
    
}
else
{
    timer=setInterval(scrollDiv,20);
    
    
}

    setTimeout(‘clearInterval(timer)‘,1000);  //停止滚动
    setTimeout(‘ifDisabled()‘,1); //滚动的时候禁用DIV防止1秒内连点2次出现一只向上或向下的情况
    setTimeout(‘ifEnabled()‘,1001);  //滚动结束后启用DIV
 
}
function ifDisabled()
{
    header.disabled=true;


}

function ifEnabled()
{
    header.disabled=false;    
}

//退出
function exit1()
{
    window.close();    
    
}