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字超详细实验报告,如下,够意思够良心了。