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

项目四网页特效制作任务一图片放大特效制作任务二广告轮播图特效制作任务三浮动广告特效制作184项目引入网页特效是指用程序代码在网页中实现特殊效果或者特殊功能的技术。在电子商务网站中常见的特效包括图片放大、轮播广告及浮动广告等。可以借助HTML、CSS、JavaScript等来编写程序代码，根据网页功能需要制作特效，强化视觉效果，展示电子商务网站的营销内容，带给用户更好的浏览体验。185学习目标知识目标1.掌握图像transform属性及其语法规则。2.理解JavaScript中获取事件源、绑定事件、引发事件驱动程序的关系。3.掌握JavaScript三要素的使用规则。技能目标1.能够应用transform属性实现图片放大特效。2.能够应用JavaScript实现图片放大特效。186任务分析图片放大是网页特效中常用的功能，尤其是在电子商务网站中，放大处理能够让用户了解物品的每个细节，更好地提升购物体验。常见的放大特效是鼠标悬停在一张图片上，该图片会慢慢放大，当鼠标移开的时候，图片恢复原来的样子。本任务重点学习图片放大特效的制作。187相关知识一、图片放大效果解析商品展示是电子商务网站一个基本且十分重要的功能，网页元素放大效果可以凸显商品，让用户更详细地了解产品，增加用户停留时长。图片放大一般有两种方法。一是通过transform:scale(n)实现，其中n表示放大的倍数，这是一种极其简单便捷的方法，但其灵活性较差。二是通过JavaScript实现，利用JavaScript三步法，即获取事件源、绑定事件、引发事件驱动程序来完成图片的放大。188JavaScript是以事件驱动为核心的一门语言，包括事件源、事件、事件驱动程序三要素。事件源是指引发后续事件的HTML标签，事件是JavaScript已经定义好的，事件驱动程序是对样式和HTML的操作程序。例如，某人用手去按开关，灯亮了。在这件事情里，事件源是手，事件是按开关，事件驱动程序是灯的开和关。同理，网页上弹出一个广告，当点击右上角的关闭按钮时，广告就会关闭。在这件事情里，事件源是关闭按钮，事件是点击，事件驱动程序是广告关闭。189二、实现图片放大关键技术1.使用transform属性实现图片放大效果在CSS3中，transform属性可以实现网页元素的变形效果，是一系列变形效果的集合，应用于2D或3D转换。该属性允许对元素进行旋转、缩放、移动或倾斜，具有无须加载额外文件，提高网站设计开发人员工作效率和加快页面执行速度等优势。transform属性的基本语法格式如下。190其中，transform属性的默认值为none，适用于行内元素和块元素，表示元素不进行变形。transform-function用于设置变形，可以是一个或多个变形样式，主要包括translate、scale、skew和rotate，具体说明如下。translate：移动元素对象，即基于X和Y坐标重新定位元素。scale：缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。skew：倾斜元素对象，取值为一个度数值。rotate：旋转元素对象，取值为一个度数值。图片放大主要使用transform中的scale实现，通过设置鼠标移过元素对象尺寸变大来展示图片细节。1912.使用JavaScript实现图片放大效果JavaScript简称JS，是属于HTML和Web的编程语言，也是一种基于对象和事件驱动的安全性好的脚本语言，在客户端运行，从而减轻服务器端的负担。在网页中引入JavaScript有3种方式，一是使用<Script></Script>标签内部样式，二是直接引入外部JavaScript文件，三是作为HTML标签中的行内样式引入。JavaScript的作用是实现页面表单验证和实现页面交互特效。192JavaScript具有以下特点。第一，被设计用来向HTML页面添加交互行为。第二，是一种互联网上最流行的脚本语言。第三，一般用于编写客户端脚本。第四，是一种解释性语言。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。（1）事件源在事件中，当前操作的那个元素即为事件源。（2）事件事件是指执行的动作。193（3）事件驱动程序JavaScript采用事件驱动的机制来响应用户操作，也就是说，当用户对某个HTML元素进行操作的时候，会产生一个时间，该时间会驱动某些函数来处理。JavaScript可以利用事件、事件源、事件驱动实现图片放大效果。194学习目标知识目标1.熟悉Swiper插件的功能。2.掌握JavaScript中offset系列的属性。

技能目标1.能够应用Swiper插件实现图片轮播。2.能够应用JavaScript实现图片轮播。195任务分析广告轮播图通常位于页面顶部，具有聚焦的特点，通常展示近期的促销信息，吸引客户浏览商品信息，引起客户的购买欲，也可以展示爆款商品信息或新款产品，为客户下次访问打下良好基础。因此，广告轮播图的设计和制作在电子商务网站中尤为重要，是网站引流的重要途径。本任务重点学习广告轮播图特效制作。196相关知识一、广告轮播图效果解析广告轮播图广泛运用于电子商务网站和移动端。基本上打开任何一个电子商务网站，首先映入眼帘的都是网站广告轮播图，如图所示。广告轮播图位置醒目，而且具有营销目的，因此，一定要精心设计，除了保证美观、有吸引力，还要考虑用户体验以及营销效果。197198广告轮播图效果示例网页广告轮播图制作思路如下。（1）设计HTML布局。在最外层套一个弹性盒子，暂且称它为box，为一张图片的宽度，设置相对定位和溢出隐藏。为了方便，在box中放一个列表ul，设置绝对定位，ul中一个列表项li放一张图片，然后让列表项li浮动，再给box定位一个左右按钮和一个用来放控制图片的小圆点的有序列表ol。（2）使用CSS设置样式。使用CSS设置被选中的图片序号或小圆点的样式。（3）使用JavaScript定义轮播行为。使用JavaScript使图片跟随鼠标、手指触摸屏幕或者自动播放。199二、实现图片自动轮播关键技术1.使用JavaScript实现图片轮播JavaScript中的offset、scroll、client系列和event对象用于实现图片轮播。offset系列能够方便获取元素尺寸，包括offsetWidth、offsetHight、offsetLeft、offsetTop、offsetParent等，其中offsetWidth、offsetHight、offsetLeft、offsetTop用于读取偏移量，并配合动画封装实现图片轮播效果。200（1）offsetWidth和offsetHight在进行网页布局时，很多情况下不方便获得盒子元素的宽度和高度，又需要知道它们的具体值，就可以使用offsetWidth和offsetHeight。offsetWidth或offsetHeight等于元素自身的宽度或高度、padding的宽度或高度及border的宽度或高度和，如图所示。201offsetWidth与offsetHeight示意（2）offsetLeft和offsetTopoffsetLeft和offsetTop属性主要用于检测真实位置。其中offsetTop获取元素上外边框到定位父级（offsetParent）上内边框的距离，offsetLeft获取元素左外边框到定位父级（offsetParent）左内边框的距离。元素的position属性可以被设置为relative（相对）、absolute（绝对）和fixed（固定）。如果父级有定位，以父级的左侧为准；如果父级没有定位，则以body为准。202（3）offsetParentoffsetParent用于检测上级盒子中带有定位的父盒子节点，是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的table、td、th、body元素。（4）动画原理及封装动画实现的核心原理就是通过定时器不断移动元素的位置，让元素实现缓动的效果。轮播图就是通过JavaScript提供的定时执行代码的功能（即定时器），实现图片的切换。因此，可以将实现轮播图的动画进行封装，需要的时候直接调用。203动画封装只需要考虑传送动画对象（obj）和目标距离（target）两个参数，内部代码可以自动多次重复调用，实现动画对象移至目标距离的效果。动画封装主要是调用定时器，在开启定时器之前需要用clearInterval（obj.timer）清除以前的定时器。还需要判断动画对象是向左移动还是向右移动，通过obj.offsetLeft获取当前对象和父级元素的距离，并将它和目标距离（target）做差，如果为负值会向左移动，如果为正值会向右移动。2042.使用Swiper插件实现图片轮播Swiper是JavaScript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。下载Swiper插件后，需要找到swiper-bundle.min.js和swiper-bundle.min.css文件（不同版本的文件名略有不同），将Swiper的CSS和JavaScript文件链接到需要制作轮播图的网页中。之后，就可以使用Swiper插件提供的CSS样式和JavaScript代码制作轮播图效果。205206加载Swiper插件代码样例学习目标知识目标1.掌握JavaScript中scroll系列的属性。2.掌握scroll封装原理。技能目标能够灵活应用scroll实现广告浮动。207任务分析浮动广告是目前网站很常见的一种广告形式。浮动广告对于广告展示有相当实用的价值，但过多会影响浏览网页的心情，因此不能滥用。本任务重点学习浮动广告特效制作。208相关知识一、页面浮动广告效果解析浮动广告是在一个网页中沿一定轨迹浮动的广告形式，它能够在用户滚动浏览页面时，通过浮动，在窗口中保持对用户可见的状态。与传统的形式相比，浮动广告更能聚焦访问者的注意力，增强广告的影响力。浮动广告主要有两种表现方式，一是沿着某一固定的曲线飘动，二是随着用户拖动浏览器的滚动条而做直线上下浮动。要制作浮动广告并不困难，需要掌握一些基本的JavaScript知识。209二、使用JavaScript实现浮动广告效果JavaScript中的scroll系列包括scrollWidth、scrollHeight、scrollLeft、scrollTop、onscroll事件，可以用于实现广告浮动效果。1.scroll系列简介（1）scrollWidth和scrollHeightscrollWidth和scrollHeight可以在没有滚动条的情况下，获取元素内容的总宽度或总高度。210需要注意的是，当元素中的内容宽度和高度小于元素的宽度和高度时（即元素中的内容没有溢出），获取到的scrollWidth等于元素的宽度，scrollHeight等于元素的高度；当元素中的内容宽度和高度大于元素的宽度和高度时（即元素中的内容溢出），获取到的scrollWidth等于元素内容的宽度，scrollHeight等于元素内容的高度。211scroll系列示意（2）scrollLeft和scrollTopscrollLeft和scrollTop是指当元素自身的onscroll事件发生时，被隐藏在内容区域上方或左侧的像素数，即网页中元素向上或向左卷曲出去的距离，通过设置这两个属性可以改变元素滚动的位置。（3）onscroll事件onscroll事件在元素滚动条滚动时触发，可以用来检测屏幕滚动。屏幕每滚动一次，即使只有1像素也会触发这个事件。2122.scroll的封装封装可以定义为对对象的内部数据表现形式和实现细节进行隐藏，通过封闭可以强制实施信息隐藏，通俗理解就是使用的时候只需要知道参数和返回值，其他条件尽量不允许用户进行设置。通过封装scroll解决浏览器兼容性问题，如果没有声明文档类型DTD可以通过document.body.scrollTop或document.body.scrollLeft去获取scrollTop和scrollLeft的值。213已经声明文档类型DTD可以通过document