《网站设计与开发》 课件 项目四 网页特效制作.pptx

项目四网页特效制作;项目引入

网页特效是指用程序代码在网页中实现特殊效果或者特殊功能的技术。在电子商务网站中常见的特效包括图片放大、轮播广告及浮动广告等。可以借助HTML、CSS、JavaScript等来编写程序代码，根据网页功能需要制作特效，强化视觉效果，展示电子商务网站的营销内容，带给用户更好的浏览体验。;学习目标

知识目标

1.掌握图像transform属性及其语法规则。

2.理解JavaScript中获取事件源、绑定事件、引发事件驱动程序的关系。

3.掌握JavaScript三要素的使用规则。

技能目标

1.能够应用transform属性实现图片放大特效。

2.能够应用JavaScript实现图片放大特效。;任务分析

图片放大是网页特效中常用的功能，尤其是在电子商务网站中，放大处理能够让用户了解物品的每个细节，更好地提升购物体验。常见的放大特效是鼠标悬停在一张图片上，该图片会慢慢放大，当鼠标移开的时候，图片恢复原来的样子。本任务重点学习图片放大特效的制作。;相关知识

一、图片放大效果解析

商品展示是电子商务网站一个基本且十分重要的功能，网页元素放大效果可以凸显商品，让用户更详细地了解产品，增加用户停留时长。

图片放大一般有两种方法。一是通过transform:scale(n)实现，其中n表示放大的倍数，这是一种极其简单便捷的方法，但其灵活性较差。二是通过JavaScript实现，利用JavaScript三步法，即获取事件源、绑定事件、引发事件驱动程序来完成图片的放大。;JavaScript是以事件驱动为核心的一门语言，包括事件源、事件、事件驱动程序三要素。事件源是指引发后续事件的HTML标签，事件是JavaScript已经定义好的，事件驱动程序是对样式和HTML的操作程序。例如，某人用手去按开关，灯亮了。在这件事情里，事件源是手，事件是按开关，事件驱动程序是灯的开和关。同理，网页上弹出一个广告，当点击右上角的关闭按钮时，广告就会关闭。在这件事情里，事件源是关闭按钮，事件是点击，事件驱动程序是广告关闭。;二、实现图片放大关键技术

1.使用transform属性实现图片放大效果

在CSS3中，transform属性可以实现网页元素的变形效果，是一系列变形效??的集合，应用于2D或3D转换。该属性允许对元素进行旋转、缩放、移动或倾斜，具有无须加载额外文件，提高网站设计开发人员工作效率和加快页面执行速度等优势。transform属性的基本语法格式如下。;其中，transform属性的默认值为none，适用于行内元素和块元素，表示元素不进行变形。transform-function用于设置变形，可以是一个或多个变形样式，主要包括translate、scale、skew和rotate，具体说明如下。

translate：移动元素对象，即基于X和Y坐标重新定位元素。

scale：缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。

skew：倾斜元素对象，取值为一个度数值。

rotate：旋转元素对象，取值为一个度数值。

图片放大主要使用transform中的scale实现，通过设置鼠标移过元素对象尺寸变大来展示图片细节。;2.使用JavaScript实现图片放大效果

JavaScript简称JS，是属于HTML和Web的编程语言，也是一种基于对象和事件驱动的安全性好的脚本语言，在客户端运行，从而减轻服务器端的负担。

在网页中引入JavaScript有3种方式，一是使用Script/Script标签内部样式，二是直接引入外部JavaScript文件，三是作为HTML标签中的行内样式引入。JavaScript的作用是实现页面表单验证和实现页面交互特效。;JavaScript具有以下特点。第一，被设计用来向HTML页面添加交互行为。第二，是一种互联网上最流行的脚本语言。第三，一般用于编写客户端脚本。第四，是一种解释性语言。

网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。

（1）事件源

在事件中，当前操作的那个元素即为事件源。

（2）事件

事件是指执行的动作。;（3）事件驱动程序

JavaScript采用事件驱动的机制来响应用户操作，也就是说，当用户对某个HTML元素进行操作的时候，会产生一个时间，该时间会驱动某些函数来处理。

JavaScript可以利用事件、事件源、事件驱动实现图片放大效果。;学习目标

知识目标

1.熟悉Swiper插件的功能。

2.掌握JavaScript中o?set系列的属性。

技能目标

1.能够应用Swiper插件实现图片轮