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

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

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

@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();    
    
}

js制作点击会自动隐藏的导航栏(固定在在头部的),古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。