HTML5期末大作业：历史——唐宋元明清 原创源码纯手打附5500字实验报告 （HTML+CSS+JavaScript）

html5期末大作业 历史向 唐宋元明清
纯手打 原创

---

1、 网站介绍

网站主题：浅析中国五朝——唐宋元明清
网站意义：中国传统文化源远流长，博大精深，包含着华夏先哲的无穷智慧，弥足珍贵的古代文化瑰宝，是人类文化宝库中的一朵璀璨奇魄。
但是现代社会的飞速进步，导致人们忽略了对前朝的关注逐渐减少，所以这个网站设计的目的就是，提高大家对于古代文化的关注。

---

提示：以下是本篇文章正文内容，下面案例可供参考

2、 设计思路

2.1 登录页面

Html+css:简单介绍
盒子1：加了长宽设置100%，
加了background图片地址+no-repeat不重复+fixed固定 ，background-size：100% 100%
盒子2：是加了定位position:absulute,然后left：50% 加上margin-left：负的盒子的一半宽度，这样就居中对齐。 盒子2上的login和login下方的字样都是margin：0 auto 自动加上相关的font操作
盒子3：同样利用定位 寻找合适位置，加上border-radius letter-spacing font-size/weight/family color美化盒子和字体，和placeholder来提示用户。
按钮4和按钮5：也是position定位加border-radius，cursor：pointer不过颜色不一样

登录界面的js功能介绍：
【1】清空：
清空比较简单，就是先获取账号和密码这两个type为text和password 的input元素，把这两个的value给清空，就是赋值为‘’
account.value = ‘’;
password.value = ‘’;
【2】密码显示与隐藏

【3】登录功能

【4】缓慢关闭登录窗口
点击右上角的叉号 ，窗口会向上平移，慢慢消失，同时浏览器窗口右上角会有有个透明的蓝色按钮慢慢下移，透明逐渐真实。

点击叉号的时候，触发了我们用addEventListener添加的click事件，触发后主要实现两个任务，一个是使登录窗口慢慢上移，同时缩小opacity,第二个任务就是绿色盒子慢慢下移，opacity增加。实现的原理：触发点击事件，就会生成两个定时器，两个定时器分别对应两个盒子，在一段很短的时间内改变opacity和obj.style.top（定位的距离），这样子，一段时间改变一点，就形成了视觉上的边移动便消失，边移动边出现。

【5】缓慢显示登陆窗口
点击刚刚移下来的蓝色小按钮，蓝色小按钮重新上移至消失，登录窗口重新下移，透明逐渐真实

2.2 首页

现在介绍首页，内容较多，先给出介绍的顺序图（介绍前3个）

【1】换肤按钮：

首页背景采用的默认是中国史诗美术大展中的胡服骑射， 背景图片一共有五张，在页面的右上角，
（1.1）Html+css介绍：
实现了老师要求的二级菜单的功能
位置是用position和z-index完成，
二级菜单实现原理：一开始照片盒子设置为display：none，鼠标移上去的时候hover：display：block
（1.2）JS功能介绍：实现换肤功能
是在script里面获取body元素，给换肤盒子加上onclick事件，通过字符拼接 改变他的backgroundImage，代码如下
document.body.style.backgroundImage = ‘url(’ + this.src + ‘)’;
src事先已经在html里面有了，所以一点就换背景。
【2】倒计时div

【7】轮播图

Banner 盒子的顶部是一个朝代div，div里面用ul+li写的，css加了float浮动，所以是横着。颜色有点透明
为了明显，加了li：hover的背景颜色为绿色，效果如下

（7.2） JS 轮播图
首先为了可以从最后一张图片回到第一张，先在JavaScript里面克隆第一张图片放在最后，这样看起来就不会突兀 方法就是cloneNode(true)，这里其实也没有子节点，这个true可以省略。
，然后循环图片数组，给每一个图片用setAttribute加上一个index属性，也就是下标索引，用来计算平移的距离。

然后分别要实现左箭头，右箭头还有下面那个圆点这三个对象的功能（圆点就是 这个）

箭头功能就是加一个onlick事件，点一下箭头，就调用animate（在animate.js里面）的平移方法，根据下标(刚才设置的index属性)的大小算出平移的距离，加个定时器，每一小段时间走一小段距离，直到距离走完，结束，这样就可以实现视觉上的动画了。

圆点要实现两个功能，
【1】一个是在图片动的时候, 圆点本身自己改变红色的位置，这个靠的是className = ‘current’，(current就是设置了红色的一个css样式)
也就是把其他图片的classname清空，然后对应的图片设置为current就可以了
在点击箭头改变或者是自动改变图片的时候都要调用这个方法。

【2】另一个圆点功能是圆点点击功能，这个其实和箭头点击差不多，也是根据下标算距离然后位移,就不介绍了，

2.3 朝代页面

见图即可，复制代码较为繁琐，源码和实验报告有非常详细的解释。
中间大图，大家可以自己操作，这里博主链接失效，就不找了

可移动放大镜功能，详情见代码和报告

黑白色调，给人感觉舒适清晰

总结

大二学期做的大作业，一个非常好的模板，题材新颖，代码量足够大，包含了其他作业没有独具特色的js互动，许多代码可以直接拷贝当作自己以后的组件使用。各位可以添加自己喜欢的模块，换题材、换文字、换照片。源码注释详细，附有5500字超详细实验报告，如下，够意思够良心了。