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

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

@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:;

    left:;

    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制作点击会自动隐藏的导航栏（固定在在头部的）的更多相关文章

  1. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

  2. 极简操作无需root隐藏S8导航栏和状态栏

    距离三星Galaxy S8国行发布快一个礼拜了,相信论坛不少小同伴已经拿到手,许多人和我一样被那块全视曲面屏给诱惑剁手的,当拿到手把玩一段时间后却發现这么美的一块屏幕居然大部分应用上下都有一行碍眼的状 ...

  3. iOS 隐藏/显示导航栏

    一.隐藏导航栏 [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBa ...

  4. iOS UITableView表视图滚动隐藏UINavigationController导航栏

    UITableView 继承于UIScrollView 所以UIScrollView 的代理方法相同适用于UITableView 中 隐藏导航栏的方法为: self.navigationControl ...

  5. Android 动态隐藏显示导航栏，状态栏

    Talk is cheap, show me the code. --Linus Torvalds Okay, here: 一.导航栏: [java] view plain copy private  ...

  6. unity 显示、隐藏Android导航栏

    1.下面的返回.home栏可用Screen.fullScreen控制 2.导航栏的显示和隐藏用下面代码控制 private AndroidJavaObject currentActivity { ge ...

  7. 用sticky.js实现头部导航栏固定

    在页面中,如果页面长度过大,滑动页面时,头部导航栏则会跟着划走. 我的头部导航栏代码为: <div class="headbar"> <center class= ...

  8. Js制作点击输入框时默认文字消失的效果

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17) 为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢 ...

  9. js实现点击切换显示隐藏，点击其它位置再隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Ubuntu中的快捷键

    Ubuntu中的许多操作在终端(Terminal)中十分的快捷,记住一些快捷键的操作更得心应手. 在Ubuntu中打开终端的快捷键是Ctrl+Alt+T.其他的一些常用的快捷键如下: 快捷键 功能 T ...

  2. JavaScript鼠标经过图片的放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. MVC自定义分页（附表跳转页Loading提示）

    之前我发表了一篇MVC无刷新分页的文章,里面用的是MvcPager控件,但是那个受那个控件限制,传值只能用PagedList,各方面都受到了限制,自由度不够高,现在还是做MVC无刷新分页,但是想直接用 ...

  4. python 根据现有文件树创建文件树

    # -*- coding: utf-8 -*- import os, errno def fileName(path):#获取文件夹 str = '' for i in range(1,len(pat ...

  5. wamp环境 安装memcache 扩展

    这两天在研究tp的memcached缓存 总是遇到坑 在网上找了很多教程看终于弄出来了现在拿出来分享 首先安装memcached下载memcache压缩包 使用cmd以管理员命令去安装 E:\wamp ...

  6. [转]Android通过NDK调用JNI，使用opencv做本地c++代码开发配置方法

    原文地址:http://blog.csdn.net/watkinsong/article/details/9849973 有一种方式不需要自己配置所有的Sun JDK, Android SDK以及ND ...

  7. ABP框架理论学习之后台工作(Jobs)和后台工作者（Workers）

    返回总目录 本篇目录 介绍 后台工作 后台工作者 让你的应用程序一直运行 介绍 ABP提供了后台工作和后台工作者,它们会在应用程序的后台线程中执行一些任务. 后台工作 后台工作以队列和持续的方式在后台 ...

  8. ASP.Net请求处理机制初步探索之旅 - Part 5 ASP.Net MVC请求处理流程

    好听的歌 我一直觉得看一篇文章再听一首好听的歌,真是种享受.于是,我在这里嵌入一首好听的歌,当然你觉得不想听的话可以点击停止,歌曲 from 王菲 <梦中人>: --> 开篇:上一篇 ...

  9. 开始研究web，mark一下

    之前想要搞引擎,经过思考之后,定位为webgl方面的引擎,这个决定早就做了,只是没有写下来   做了一些调研之后,确定使用babylon.js 和typescript 和c# 来开发   Babylo ...

  10. Atitit 代码复用的理解attilax总结

    Atitit 代码复用的理解attilax总结 1.1. 继承1 1.1.1. 模式1:原型继承1 1.1.2. 模式2:复制所有属性进行继承 拷贝继承1 1.1.3. 模式3:混合(mix-in)1 ...