广州鲁迅纪念馆/国民党一样好会址/文明路钟楼

题将得稍微复杂,想表达的意是三者指同一栋建筑,它于不同的年份里打至了不同之图,因此也养了不同的名。我事先出言出口即座厕文明路215哀号的建造的盖经历。

尽管如此日子轴早已不是啊异样事物了,个人仅是感谢兴趣所以就研究一下,最近自网上搜索了一个个人感觉比较好之流年轴demo,下载下来研究了一晃连举行了下修改.具体的职能使下图:(该demo实现之凡滚加载图片)

此本为广东贡院所在,清末委科举后,创立两科普优级师范学堂,1912年变动呢国营广东高档师范。这所带钟楼的礼堂就为该院校的礼堂,建造时间我临时没有查及。1924年1月,孙中山于是召开中国国民党第一差全国代表大会。同年,广东高师与广东公立法科大学,广东国立农业特别学校等联合组建公立广东大学,仍为此地为校址。1926年,该校改名为公立中山大学。直到今天,中大的校徽上随打着就座钟楼。

代码地址:http://files.cnblogs.com/files/cby-love/html5响应式时间轴.zip

1927年,鲁迅以中山大学任教期间便停止在这楼。1957年,此处设鲁迅纪念馆,为这广东省博物馆的平等片。2010年,广东省博物馆迁移向珠江新城后,此地封闭维修。2016年11月12日,此地重新开。

自家是当网上搜寻资料时发现纪念馆还开之讯息的,想想这附近为生一些处没去了之风物,便趁机周日出门的时来逛逛。虽是三元,人反而不多,也许是以重开没多久,很多丁尚不清楚吧。

怎么样促成滚动加载图片的?最要紧是以下的代码有:

钟楼正面

(function() {
  $(document).ready(function() {
    var timelineAnimate;
    timelineAnimate = function(elem) {
      return $(".timeline.animated .timeline-row").each(function(i) {
        var bottom_of_object, bottom_of_window;
        bottom_of_object = $(this).position().top + $(this).outerHeight();
        bottom_of_window = $(window).scrollTop() + $(window).height();
        if (bottom_of_window > bottom_of_object) {
          return $(this).addClass("active");
        }
      });
    };
    timelineAnimate();
    return $(window).scroll(function() {
      return timelineAnimate();
    });
  });

}).call(this);

馆内现有三独主导陈列:“钟声:1924——中国国民党第一不善全国代表大会历史”、“在钟楼上——鲁迅和广东”和“广东贡院号舍基址陈列”。进正门左转是国民党一样深历史的陈,参观结束以后是鲁迅的,出来时虽是才进正门右改的地方。按这漫漫路线活动,看到底情是切合逻辑顺序的。另外,一百般会场及贡院号舍基址得进正门之后直走,会场门口是楼梯,从此处上第二楼有中大会议室和鲁迅卧室。

因为我们的样例中实际上还免是纯的动态加载图片(即动态生成html标签及dom元素,后续可以更失去贯彻),只是将本页面被的隐蔽或者说管opacity属性值由0变呢1了.通过看以上代码,这个地方莫过于是有只小算法的.

国民党一样很会场

if (bottom_of_window > bottom_of_object) 才会去给当前对象(即类控制器为.timeline.animated .timeline-row的对象)添加类选择器active(暂且先不具体该类选择器实现什么效果)
我们先讨论下这两个值bottom_of_window和bottom_of_object

bottom_of_window = $(window).scrollTop() + $(window).height();

$(window).scrollTop()表示当前滚动条的位置距离页面顶端的距离,其实可以理解为页面滚动条拉到某个位置,顶部隐藏的页面内容的高度;

$(window).height()表示当前可视页面区域的高度;

bottom_of_object = $(this).position().top + $(this).outerHeight();

$(this).position().top表示当前元素距离父元素的距离,个人理解为应该就是margintop的值吧,

$(this).outerHeight()表示当前元素的高度还有padding+border,但不包括margin
如下盒子模型:

国民党一样怪之罗列包括了本次议会的背景,会议议题,会议成果暨会后到北伐之间的变革活动。对于无熟悉那段历史之人数来说,陈列着之详实讲述对理清波之前因后果非常有因此,其中的各种细节呢使历史变得不再枯燥无味。对于熟悉那段历史的口,陈列着的各种会公文,宣传册等原件及现象复原,也会给人口大饱眼福,或许还会遇见有未曾见了的素材,同样会无虚此行。

孙中山就任海陆军大元帅时的衣裳(大元帅府前面那个雕像就是穿越的这身衣服)

当if (bottom_of_window > bottom_of_object)为真的情况下,我们看到执行了return $(this).addClass("active"),这段代码起什么作用呢,其实作用就是
用户在拖动滚动条时时间轴内容的过渡效果,我们可以看到添加效果是向.timeline.animated .timeline-row添加的,我们查看样式文件关于这个类选择器的所在对象都有什么
样式效果:

.timeline.animated .timeline-row .timeline-content {
    opacity: 0;
    left: 20px;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s; }
  .timeline.animated .timeline-row:nth-child(odd) .timeline-content {
    left: -20px; }
  .timeline.animated .timeline-row.active .timeline-content {
    opacity: 1;
    left: 0; }
  .timeline.animated .timeline-row.active:nth-child(odd) .timeline-content {
    left: 0; }

孙中山同李大钊会见

好明朗在实行$(this).addClass(“active”)之后,以下体起作用了.

代表名单

.timeline.animated .timeline-row.active .timeline-content {
    opacity: 1;
    left: 0; }

大会宣言

缘何会来一个联网的飘入效果也,其实就算是概念了

北伐军攻克武昌

.timeline.animated .timeline-row .timeline-content {
    opacity: 0;
    left: 20px;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s; }

通下去是鲁迅先生。

transition(css3标签)定义了看似选择器.timeline.animated .timeline-row
.timeline-content的包含对象仅发生发出另外样式更改都见面生一个0.8.s光阴的对接效果,当然者日子

鲁迅像

俺们好还去窜。

初步是鲁迅的有的著同任职经历,并没有占用好挺地方,我要是圈展品,毕竟这些才是尚未见了之东西。首先是片翻作品,有果戈理的《死魂灵》、契诃夫的《坏孩子》等。旁边还加大了平依外选编的苏联木刻作品集《引玉集》。虽然咱着重是自文学作品开始认识鲁迅的,但决不忘记了,他的好不止于文学领域。他爱画画,引进并推广了西方的木刻、版画艺术。他吧潜心研究,完成了炎黄首先管系统的小说史,整理校勘了无数古书。后面的展出有一些尚特意提到他同木刻艺术的放大。

因为咱们以尽$(this).addClass(“active”)之前,我们时刻轴左边的对象的样式如下(我们少还先说日子轴左边的)

鲁迅的有翻译作品

.timeline.animated .timeline-row:nth-child(odd) .timeline-content {

opacity: 0;

left: -20px; }

著之旁边发生有文书与单,挺有趣的,不妨看,了解一下当下的薪资条,聘书等是添加什么样的。

推行下样式如下:

教育部的委任状,旁边是国营北京女儿师范大学的聘书

.timeline.animated .timeline-row.active .timeline-content {
    opacity: 1;
    left: 0; }

鲁迅以北京大学之薪水收据

所以会见时有发生一个从左到右的一个贯彻力量,因为透明度与左距都变了。

再有鲁迅于矿务铁路学堂读书时之教材和毕业证。我们经常说鲁迅“弃医从文”,不过读了《朝花夕拾》的人头应该会了解,鲁迅在前往日本留学前是当矿路学堂上之。在此地,由于新来的总办“是个新党”,自己出汉文题,会干到往读古书的课堂上不至物,“看新书的风气就流行起来”。鲁迅为当这儿启幕念《天演论》等新书。这些情节是很久以前看之了,刚才去查的上,才又记清了。不过,有平等截也总为忘怀不了:

 

有一致坏是《华盛顿论》,汉文教员反而惴惴地来提问我们道:“华盛顿凡什么事物呀?……”

日子轴右边的目标为什么是打右侧至错误的一个切入效果也,首先实施$(this).addClass(“active”)之前,时间轴右边对象样式也

矿务铁路学堂的教科书

.timeline.animated .timeline-row .timeline-content {
    opacity: 0;
    left: 20px;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s; }

鲁迅的毕业证,没有像,大家知晓怎么防止冒认吗?在图及搜一寻

俺们来看left为20px,opacity(透明度也0),执行$(this).addClass(“active”)之后

1927年1月,鲁迅应聘到公立中山大学任文学系教授。18日,鲁迅经水路到广州。展览接下的片即使是谈鲁迅于广州时的干活跟在了。

 .timeline.animated .timeline-row.active .timeline-content {
    opacity: 1;
    left: 0; }

至广州了

left为0,opacity(透明度也1),transition为0.8s,所以来一个从右到左的一个连贯效果了.

中生报刊上迎鲁迅的始末

如上代码来一个考证的地方

鲁迅到中山大学来讲学,讲了数什么课呢?黑板上之课表就是答案,不晓凡是免是那时之那片黑板呢?

.timeline-row:nth-child(odd)中的nth-child(odd)选择器,因为css的解析顺序是从右到左,所以这个地方的意思表示.timeline-row为奇数的对象(属于其父元素的第奇数个timeline-row)

假如有以下代码,

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

<p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>

鲁迅于遭到格外所起课程

 其中p:nth-child(2)表示p的父元素中第二个子元素,并且是子元素是p,这时候第二只子元素正好是P所以显示效果如下

2月10日,鲁迅被任为文学系主任兼任校教务主任。到辞职了,鲁迅主持举行了7次教务会议。展览中罗列了即底片会议记录和历次会议概况。

中大教务会议记录

要改变呢以下

鲁迅于中大辞职后,搬入白云楼居住。参观这里时,听到一个老人对其家人说这栋楼仍在,就放在白云旅途。看到同样摆当场的相片时,她还告诉家属照片上之呀地方是铁路。孩子说白云路没有铁路,她对说以前的广州站就在那。前段时间看资讯说始终广州站所于的地方盖了单稍公园,有铁轨和机车,应该就老人说的坏地方了。看来她和白云楼离得不多,以后去之语句就一样次于错过两个地方吧。

<h1>这是标题</h1>
<h2>第一个段落。</h2>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

背后的展就是劈主题而休是据时间顺序了。按参观各个依次为:鲁迅在广州的生,鲁迅及其它文化名人的往来,鲁迅以及木刻,鲁迅和许广平的爱情,鲁迅于广州开创之北新书屋。在这些展出内容遭,一个实的鲁迅被展现在参观者面前。他的生活并无是一味出征,他也会见失去吆喝早茶,下馆子,到照相馆拍摄,他吧时有发生和好之喜欢,有好深爱的口。他连发会刻画批判时弊的杂文和小说,他呢会刻画寄托相思的情书。他尚于广州起了千篇一律小书店,因为他发“广州的文坛太寂寞”。行走于这些展品和讲文字被,我庆幸于自己能够顾一个重立体之鲁迅。

这效果如下

鲁迅及许广平,他们身后是鲁迅的一部分照片

日本友人主讲的木刻课,鲁迅举行翻译

因p:nth-child(2)第二独子元素是h2,而非是p所以没找到匹配的因素,所以背景色也尚未大效.

鲁迅用了之邮箱

事先研暨此,后续有工夫准备让页面元素动态加载,而未是在页面及早早显示出来,只是通过决定透明度来展示或者隐藏.

邮箱内的信仰

 

许广平保存之鲁迅没有世日日历

鲁迅以广州始发之北新书店

挪有纪念馆,院内两侧有很多长椅可供应休息。每条长椅上还雕刻在同等词鲁迅的口舌。在纪念馆的东侧,有一致口水井,是那时广东贡院的井,是近期这次大修时吃察觉的。

石椅上雕刻在鲁迅的语句

贡井

打东南角看纪念馆

**地址:
**

广东省广州市越秀区文明路215哀号(与省立中山图书馆当同样大院内)

抵达方式:

1.起1声泪俱下线农称所站A出口出发,沿A口向上行(沿德政中路南行),约400米后至第一个十字路口,左转进入文明路,走过一栋楼就可见到纪念馆。

2.打6哀号线团一深广场站A出口出发,沿A口通往为的相反方向前履行(沿越秀南路北上),路上会通过中华全国总工会旧址。行走约500米后到达第二单街头,此时早就可张马路(文明路)对面的纪念馆。

3.乘以下无一公交,在中山图书馆站下车:3、35、65、91、101、104、106、125、183、215长线、215、541、b8、广12、广42、夜21、夜36、夜39、夜69。该公交站就于纪念馆大门外。

学院门口是这般的

开时:

周二及周日9:00~17:00

周一闭馆(法定节日及奇特状况除了)

门票:

免费,须凭身份证在门口领票(16:00艾领票)

咨询电话:

020-83842170

邻去处:

省立中山图书馆:就在旁边

明远楼:在中山图书馆后的那长长的羊肠小道上,现为广东贡院历史陈列馆

中山大学天文台旧址:与明远楼在一如既往条羊肠小道上

东平大押:中山四路以及越秀中路相交的十字路口处

农讲所:1声泪俱下线农称所站C出口外

参考资料:

1.2017年1月1日参观见闻

2.明远楼陈列

3.鲁迅纪念馆陈列

4.鲁迅教授

5.广州鲁迅纪念馆今早还开馆(图)_金羊网新闻

6.现广州(文明路大钟楼)

7.大方路“钟楼”大修竣工消失百年贡院掀起盖头(图)

8.文明路“钟楼”11月对外开放将产生经常如展厅

9.百度健全:鲁迅
 琐记