2019Web前端开发技术实验

兰全祥

目录

  • 1 HTML(4学时)
    • 1.1 实验目的和要求
    • 1.2 题目1：百度搜索
    • 1.3 题目2：百度图库搜索
    • 1.4 题目3：个性化网站设计
    • 1.5 代码提交
  • 2 CSS(4学时)
    • 2.1 实验目的和要求
    • 2.2 题目1：仿写百度首页
    • 2.3 题目2：仿写微信导航栏
    • 2.4 题目3：CSS3动画
    • 2.5 代码提交
  • 3 JavaScript(6学时)
    • 3.1 实验目的和要求
    • 3.2 题目1：打印九九乘法表
    • 3.3 题目2：开关灯
    • 3.4 题目3：简易计算器
    • 3.5 题目4：动态相册
    • 3.6 题目5：多彩网页时钟
    • 3.7 题目6：随机闪烁彩灯
    • 3.8 题目7：金额转换
    • 3.9 题目8：留言板
    • 3.10 代码提交
  • 4 Ajax(4学时)
    • 4.1 实验目的和要求
    • 4.2 题目1：TXT数据请求
    • 4.3 题目2：XML数据请求
    • 4.4 题目3：JSON数据请求
    • 4.5 选做：多级下拉列表
    • 4.6 代码提交
  • 5 HTML5(2学时)
    • 5.1 实验目的和要求
    • 5.2 题目1：新元素练习
    • 5.3 题目2：绘制五星红旗
    • 5.4 题目3：简易播放器
    • 5.5 代码提交
  • 6 JQuery(4学时)
    • 6.1 实验目的和要求
    • 6.2 题目1：实现按钮点击
    • 6.3 题目2：jQuery动画
    • 6.4 题目3：jQuery与HTML
    • 6.5 代码提交
  • 7 综合实训(课外)
    • 7.1 实验目的和要求
    • 7.2 音乐播放器
  • 8 直播课程
    • 8.1 第3周直播
    • 8.2 第4周直播
    • 8.3 第5周直播
    • 8.4 第6周直播
    • 8.5 第7周直播
    • 8.6 第8周直播
    • 8.7 第9周直播
    • 8.8 第9周直播
    • 8.9 第11周周五直播
    • 8.10 第12周周一直播
    • 8.11 第12周周五直播
    • 8.12 第13周周一直播
    • 8.13 第13周周五直播
题目4：动态相册
  • 1 实验要求
  • 2 实验解析

实验要求：

1、用表格或者是div+css对网页进行布局；

2、使用事件监听器对表格中的名称进行点击事件、鼠标移出、鼠标移入事件监听；

3、点击名称可以跳转到百度图库进行搜索；

4、鼠标移入名称可以在左边显示人物图像；

5、鼠标移出名称左边的任务图像可以进行循环切换显示；

6、图像附加圆角边框；

7、不允许为名称添加超链接、事件响应等，必须使用事件对象模型。

8、左侧图片具有透明度变化的效果。

参考技术：


JS事件监听

JS鼠标事件（移入、移出、单击）

JS网页跳转window.location.href

JS事件对象

JS数组

CSS透明opacity、圆角