《網(wǎng)站設計與開發(fā)》 課件 項目四 網(wǎng)頁特效制作

項目四網(wǎng)頁特效制作任務一圖片放大特效制作任務二廣告輪播圖特效制作任務三浮動廣告特效制作184項目引入網(wǎng)頁特效是指用程序代碼在網(wǎng)頁中實現(xiàn)特殊效果或者特殊功能的技術。在電子商務網(wǎng)站中常見的特效包括圖片放大、輪播廣告及浮動廣告等。可以借助HTML、CSS、JavaScript等來編寫程序代碼，根據(jù)網(wǎng)頁功能需要制作特效，強化視覺效果，展示電子商務網(wǎng)站的營銷內容，帶給用戶更好的瀏覽體驗。185學習目標知識目標1.掌握圖像transform屬性及其語法規(guī)則。2.理解JavaScript中獲取事件源、綁定事件、引發(fā)事件驅動程序的關系。3.掌握JavaScript三要素的使用規(guī)則。技能目標1.能夠應用transform屬性實現(xiàn)圖片放大特效。2.能夠應用JavaScript實現(xiàn)圖片放大特效。186任務分析圖片放大是網(wǎng)頁特效中常用的功能，尤其是在電子商務網(wǎng)站中，放大處理能夠讓用戶了解物品的每個細節(jié)，更好地提升購物體驗。常見的放大特效是鼠標懸停在一張圖片上，該圖片會慢慢放大，當鼠標移開的時候，圖片恢復原來的樣子。本任務重點學習圖片放大特效的制作。187相關知識一、圖片放大效果解析商品展示是電子商務網(wǎng)站一個基本且十分重要的功能，網(wǎng)頁元素放大效果可以凸顯商品，讓用戶更詳細地了解產(chǎn)品，增加用戶停留時長。圖片放大一般有兩種方法。一是通過transform:scale(n)實現(xiàn)，其中n表示放大的倍數(shù)，這是一種極其簡單便捷的方法，但其靈活性較差。二是通過JavaScript實現(xiàn)，利用JavaScript三步法，即獲取事件源、綁定事件、引發(fā)事件驅動程序來完成圖片的放大。188JavaScript是以事件驅動為核心的一門語言，包括事件源、事件、事件驅動程序三要素。事件源是指引發(fā)后續(xù)事件的HTML標簽，事件是JavaScript已經(jīng)定義好的，事件驅動程序是對樣式和HTML的操作程序。例如，某人用手去按開關，燈亮了。在這件事情里，事件源是手，事件是按開關，事件驅動程序是燈的開和關。同理，網(wǎng)頁上彈出一個廣告，當點擊右上角的關閉按鈕時，廣告就會關閉。在這件事情里，事件源是關閉按鈕，事件是點擊，事件驅動程序是廣告關閉。189二、實現(xiàn)圖片放大關鍵技術1.使用transform屬性實現(xiàn)圖片放大效果在CSS3中，transform屬性可以實現(xiàn)網(wǎng)頁元素的變形效果，是一系列變形效果的集合，應用于2D或3D轉換。該屬性允許對元素進行旋轉、縮放、移動或傾斜，具有無須加載額外文件，提高網(wǎng)站設計開發(fā)人員工作效率和加快頁面執(zhí)行速度等優(yōu)勢。transform屬性的基本語法格式如下。190其中，transform屬性的默認值為none，適用于行內元素和塊元素，表示元素不進行變形。transform-function用于設置變形，可以是一個或多個變形樣式，主要包括translate、scale、skew和rotate，具體說明如下。translate：移動元素對象，即基于X和Y坐標重新定位元素。scale：縮放元素對象，可以使任意元素對象尺寸發(fā)生變化，取值包括正數(shù)、負數(shù)和小數(shù)。skew：傾斜元素對象，取值為一個度數(shù)值。rotate：旋轉元素對象，取值為一個度數(shù)值。圖片放大主要使用transform中的scale實現(xiàn)，通過設置鼠標移過元素對象尺寸變大來展示圖片細節(jié)。1912.使用JavaScript實現(xiàn)圖片放大效果JavaScript簡稱JS，是屬于HTML和Web的編程語言，也是一種基于對象和事件驅動的安全性好的腳本語言，在客戶端運行，從而減輕服務器端的負擔。在網(wǎng)頁中引入JavaScript有3種方式，一是使用<Script></Script>標簽內部樣式，二是直接引入外部JavaScript文件，三是作為HTML標簽中的行內樣式引入。JavaScript的作用是實現(xiàn)頁面表單驗證和實現(xiàn)頁面交互特效。192JavaScript具有以下特點。第一，被設計用來向HTML頁面添加交互行為。第二，是一種互聯(lián)網(wǎng)上最流行的腳本語言。第三，一般用于編寫客戶端腳本。第四，是一種解釋性語言。網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā)JavaScript函數(shù)的事件。（1）事件源在事件中，當前操作的那個元素即為事件源。（2）事件事件是指執(zhí)行的動作。193（3）事件驅動程序JavaScript采用事件驅動的機制來響應用戶操作，也就是說，當用戶對某個HTML元素進行操作的時候，會產(chǎn)生一個時間，該時間會驅動某些函數(shù)來處理。JavaScript可以利用事件、事件源、事件驅動實現(xiàn)圖片放大效果。194學習目標知識目標1.熟悉Swiper插件的功能。2.掌握JavaScript中o?set系列的屬性。

技能目標1.能夠應用Swiper插件實現(xiàn)圖片輪播。2.能夠應用JavaScript實現(xiàn)圖片輪播。195任務分析廣告輪播圖通常位于頁面頂部，具有聚焦的特點，通常展示近期的促銷信息，吸引客戶瀏覽商品信息，引起客戶的購買欲，也可以展示爆款商品信息或新款產(chǎn)品，為客戶下次訪問打下良好基礎。因此，廣告輪播圖的設計和制作在電子商務網(wǎng)站中尤為重要，是網(wǎng)站引流的重要途徑。本任務重點學習廣告輪播圖特效制作。196相關知識一、廣告輪播圖效果解析廣告輪播圖廣泛運用于電子商務網(wǎng)站和移動端?；旧洗蜷_任何一個電子商務網(wǎng)站，首先映入眼簾的都是網(wǎng)站廣告輪播圖，如圖所示。廣告輪播圖位置醒目，而且具有營銷目的，因此，一定要精心設計，除了保證美觀、有吸引力，還要考慮用戶體驗以及營銷效果。197198廣告輪播圖效果示例網(wǎng)頁廣告輪播圖制作思路如下。（1）設計HTML布局。在最外層套一個彈性盒子，暫且稱它為box，為一張圖片的寬度，設置相對定位和溢出隱藏。為了方便，在box中放一個列表ul，設置絕對定位，ul中一個列表項li放一張圖片，然后讓列表項li浮動，再給box定位一個左右按鈕和一個用來放控制圖片的小圓點的有序列表ol。（2）使用CSS設置樣式。使用CSS設置被選中的圖片序號或小圓點的樣式。（3）使用JavaScript定義輪播行為。使用JavaScript使圖片跟隨鼠標、手指觸摸屏幕或者自動播放。199二、實現(xiàn)圖片自動輪播關鍵技術1.使用JavaScript實現(xiàn)圖片輪播JavaScript中的o?set、scroll、client系列和event對象用于實現(xiàn)圖片輪播。o?set系列能夠方便獲取元素尺寸，包括o?setWidth、o?setHight、o?setLeft、o?setTop、o?setParent等，其中o?setWidth、o?setHight、o?setLeft、o?setTop用于讀取偏移量，并配合動畫封裝實現(xiàn)圖片輪播效果。200（1）offsetWidth和offsetHight在進行網(wǎng)頁布局時，很多情況下不方便獲得盒子元素的寬度和高度，又需要知道它們的具體值，就可以使用o?setWidth和o?setHeight。o?setWidth或o?setHeight等于元素自身的寬度或高度、padding的寬度或高度及border的寬度或高度和，如圖所示。201o?setWidth與o?setHeight示意（2）offsetLeft和offsetTopo?setLeft和o?setTop屬性主要用于檢測真實位置。其中o?setTop獲取元素上外邊框到定位父級（o?setParent）上內邊框的距離，o?setLeft獲取元素左外邊框到定位父級（o?setParent）左內邊框的距離。元素的position屬性可以被設置為relative（相對）、absolute（絕對）和?xed（固定）。如果父級有定位，以父級的左側為準；如果父級沒有定位，則以body為準。202（3）offsetParento?setParent用于檢測上級盒子中帶有定位的父盒子節(jié)點，是一個只讀屬性，返回一個指向最近的（指包含層級上的最近）包含該元素的定位元素或者最近的table、td、th、body元素。（4）動畫原理及封裝動畫實現(xiàn)的核心原理就是通過定時器不斷移動元素的位置，讓元素實現(xiàn)緩動的效果。輪播圖就是通過JavaScript提供的定時執(zhí)行代碼的功能（即定時器），實現(xiàn)圖片的切換。因此，可以將實現(xiàn)輪播圖的動畫進行封裝，需要的時候直接調用。203動畫封裝只需要考慮傳送動畫對象（obj）和目標距離（target）兩個參數(shù)，內部代碼可以自動多次重復調用，實現(xiàn)動畫對象移至目標距離的效果。動畫封裝主要是調用定時器，在開啟定時器之前需要用clearInterval（obj.timer）清除以前的定時器。還需要判斷動畫對象是向左移動還是向右移動，通過obj.o?setLeft獲取當前對象和父級元素的距離，并將它和目標距離（target）做差，如果為負值會向左移動，如果為正值會向右移動。2042.使用Swiper插件實現(xiàn)圖片輪播Swiper是JavaScript打造的滑動特效插件，面向手機、平板電腦等移動終端。Swiper能實現(xiàn)觸屏焦點圖、觸屏Tab切換、觸屏輪播圖切換等常用效果。下載Swiper插件后，需要找到swiper-bundle.min.js和swiper-bundle.min.css文件（不同版本的文件名略有不同），將Swiper的CSS和JavaScript文件鏈接到需要制作輪播圖的網(wǎng)頁中。之后，就可以使用Swiper插件提供的CSS樣式和JavaScript代碼制作輪播圖效果。205206加載Swiper插件代碼樣例學習目標知識目標1.掌握JavaScript中scroll系列的屬性。2.掌握scroll封裝原理。技能目標能夠靈活應用scroll實現(xiàn)廣告浮動。207任務分析浮動廣告是目前網(wǎng)站很常見的一種廣告形式。浮動廣告對于廣告展示有相當實用的價值，但過多會影響瀏覽網(wǎng)頁的心情，因此不能濫用。本任務重點學習浮動廣告特效制作。208相關知識一、頁面浮動廣告效果解析浮動廣告是在一個網(wǎng)頁中沿一定軌跡浮動的廣告形式，它能夠在用戶滾動瀏覽頁面時，通過浮動，在窗口中保持對用戶可見的狀態(tài)。與傳統(tǒng)的形式相比，浮動廣告更能聚焦訪問者的注意力，增強廣告的影響力。浮動廣告主要有兩種表現(xiàn)方式，一是沿著某一固定的曲線飄動，二是隨著用戶拖動瀏覽器的滾動條而做直線上下浮動。要制作浮動廣告并不困難，需要掌握一些基本的JavaScript知識。209二、使用JavaScript實現(xiàn)浮動廣告效果JavaScript中的scroll系列包括scrollWidth、scrollHeight、scrollLeft、scrollTop、onscroll事件，可以用于實現(xiàn)廣告浮動效果。1.scroll系列簡介（1）scrollWidth和scrollHeightscrollWidth和scrollHeight可以在沒有滾動條的情況下，獲取元素內容的總寬度或總高度。210需要注意的是，當元素中的內容寬度和高度小于元素的寬度和高度時（即元素中的內容沒有溢出），獲取到的scrollWidth等于元素的寬度，scrollHeight等于元素的高度；當元素中的內容寬度和高度大于元素的寬度和高度時（即元素中的內容溢出），獲取到的scrollWidth等于元素內容的寬度，scrollHeight等于元素內容的高度。211scroll系列示意（2）scrollLeft和scrollTopscrollLeft和scrollTop是指當元素自身的onscroll事件發(fā)生時，被隱藏在內容區(qū)域上方或左側的像素數(shù)，即網(wǎng)頁中元素向上或向左卷曲出去的距離，通過設置這兩個屬性可以改變元素滾動的位置。（3）onscroll事件onscroll事件在元素滾動條滾動時觸發(fā)，可以用來檢測屏幕滾動。屏幕每滾動一次，即使只有1像素也會觸發(fā)這個事件。2122.scroll的封裝封裝可以定義為對對象的內部數(shù)據(jù)表現(xiàn)形式和實現(xiàn)細節(jié)進行隱藏，通過封閉可以強制實施信息隱藏，通俗理解就是使用的時候只需要知道參數(shù)和返回值，其他條件盡量不允許用戶進行設置。通過封裝scroll解決瀏覽器兼容性問題，如果沒有聲明文檔類型DTD可以通過document.body.scrollTop或document.body.scrollLeft去獲取scrollTop和scrollLeft的值。213已經(jīng)聲明文檔類型DTD可以通過document