《電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作（第二版）》項(xiàng)目十制作網(wǎng)頁(yè)交互特效_第1頁(yè)
《電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作（第二版）》項(xiàng)目十制作網(wǎng)頁(yè)交互特效_第2頁(yè)
《電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作（第二版）》項(xiàng)目十制作網(wǎng)頁(yè)交互特效_第3頁(yè)
《電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作（第二版）》項(xiàng)目十制作網(wǎng)頁(yè)交互特效_第4頁(yè)
《電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作（第二版）》項(xiàng)目十制作網(wǎng)頁(yè)交互特效_第5頁(yè)
已閱讀5頁(yè)，還剩39頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

項(xiàng)目十制作網(wǎng)頁(yè)交互特效主要內(nèi)容項(xiàng)目引導(dǎo)項(xiàng)目任務(wù)書(shū)項(xiàng)目任務(wù)實(shí)施1233項(xiàng)目任務(wù)分析4自學(xué)與拓展35項(xiàng)目引導(dǎo)網(wǎng)頁(yè)特效是網(wǎng)頁(yè)中非常有魅力的部分，任何一個(gè)網(wǎng)站都少不了網(wǎng)頁(yè)特效的制作，它是網(wǎng)頁(yè)制作的一個(gè)重要組成部分。網(wǎng)頁(yè)特效的制作不是很難的事情，只要具備一定的JavaScript

基礎(chǔ)和CSS樣式知識(shí)就可以在頁(yè)面上實(shí)現(xiàn)豐富的動(dòng)態(tài)特殊效果。本項(xiàng)目將介紹現(xiàn)今幾個(gè)比較流行的網(wǎng)頁(yè)特效制作實(shí)例（圖片放大制作、廣告圖片自動(dòng)輪換制作、動(dòng)感導(dǎo)航條制作和浮動(dòng)廣告制作），以提高學(xué)習(xí)者的網(wǎng)頁(yè)特效制作能力。項(xiàng)目任務(wù)書(shū)能力目標(biāo)學(xué)習(xí)完本項(xiàng)目后，學(xué)生應(yīng)當(dāng)能夠依據(jù)公司項(xiàng)目要求完成頁(yè)面的特效制作，包括：利用CSS配置來(lái)完成頁(yè)面交互的設(shè)計(jì)通過(guò)DIV區(qū)塊劃分，對(duì)應(yīng)CSS樣式利用JavaScript來(lái)完成頁(yè)面交互的設(shè)計(jì)通過(guò)網(wǎng)頁(yè)交互特效來(lái)增加訪(fǎng)問(wèn)者的滿(mǎn)意度項(xiàng)目任務(wù)引導(dǎo)—任務(wù)一制作圖片放大特效本任務(wù)目標(biāo)是利用CSS實(shí)現(xiàn)浙江內(nèi)利信息技術(shù)公司電子商務(wù)網(wǎng)站首頁(yè)的圖片放大特效功能。通常放在頁(yè)面上的圖片不能太大，為了讓客戶(hù)瀏覽方便，當(dāng)用戶(hù)鼠標(biāo)經(jīng)過(guò)圖片時(shí)，使該圖片可以自動(dòng)放大項(xiàng)目任務(wù)實(shí)施—任務(wù)一制作圖片放大特效1.補(bǔ)充產(chǎn)品展示區(qū)域在項(xiàng)目九的基礎(chǔ)上，打開(kāi)網(wǎng)頁(yè)index.html并在其products區(qū)塊中插入一個(gè)兩行一列的表格，并在第二行中插入項(xiàng)目列表和列表項(xiàng)，加入后的代碼如下所示：<tablewidth="200"border="0"> <tr> <td><imgsrc="images/products/showproduct.gif"/></td> </tr><tr> <tdalign="center"> <ulid='zoomin'> <li><ahref="#"><imgsrc="images/products/1.gif"/></a><brclear="all"><br><fontcolor="#FF0000">康師傅方便面</font></li> <li><ahref="#"><imgsrc="images/products/2.gif"/></a><brclear="all"><br><fontcolor="#FF0000">可愛(ài)手表</font></li> </ul> </td> </tr> </table>項(xiàng)目任務(wù)實(shí)施—任務(wù)一制作圖片放大特效上述代碼中包含三個(gè)圖片在images文件夾下新建products文件夾并將這些圖片存放到該文件夾下面項(xiàng)目任務(wù)實(shí)施—任務(wù)一制作圖片放大特效2.創(chuàng)建樣式文件可以看見(jiàn)康師傅方便面和可愛(ài)手表兩個(gè)圖片并沒(méi)有并排顯示在一行中。為了實(shí)現(xiàn)這個(gè)效果，我們將制作圖片放大特效，這也是使用圖片放大特效的主要原因。具體操作如下：創(chuàng)建用于定位、修飾圖片的初始狀態(tài)和鼠標(biāo)經(jīng)過(guò)狀態(tài)的CSS樣式文件enlarge.css，將其存放到CSS文件夾下。這個(gè)文件對(duì)于圖片的定位和顯示至關(guān)重要。在這個(gè)文件里主要做如下設(shè)置：設(shè)置用于圖片的頁(yè)邊距、填充、邊框等大??；設(shè)置圖片的定位、超鏈接以及鼠標(biāo)經(jīng)過(guò)顯示等屬性，具體代碼如下：/*設(shè)置項(xiàng)目列表的屬性*/#zoomin{padding:0;margin:10pxauto;list-style-type:none;width:200px;height:130px;}項(xiàng)目任務(wù)實(shí)施—任務(wù)一制作圖片放大特效/*設(shè)置列表項(xiàng)的屬性*/#zoominli{position:relative;display:block; float:left; margin-right:15px; width:80px; height:110px;}/*設(shè)置列表項(xiàng)超鏈接的屬性*/#zoominlia{position:relative;display:block;width:80px;height:80px;background:transparent;}/*設(shè)置列表項(xiàng)圖片超鏈接的屬性*/#zoominliaimg{width:100%;height:100%;border:1pxsolid#999999;}/*設(shè)置列表項(xiàng)鼠標(biāo)經(jīng)過(guò)時(shí)的屬性*/#zoominlia:hover{position:absolute;left:-30px;top:-30px;width:110px;height:110px;border:0px;}項(xiàng)目任務(wù)實(shí)施—任務(wù)一制作圖片放大特效3.導(dǎo)入樣式文件在CSS樣式面板中，通過(guò)“附加樣式表”，導(dǎo)入enlarge樣式表文件，這時(shí)在代碼視圖<head>標(biāo)簽之間則添加了如下代碼。<linkhref="css/enlarge.css"rel="stylesheet"type="text/css">項(xiàng)目任務(wù)分析—任務(wù)一制作圖片放大特效1.CSS控制圖片上述圖片放大特效的實(shí)現(xiàn)采用了CSS樣式的方法，通過(guò)CSS設(shè)置圖片的頁(yè)邊距、填充、邊框等大小，同時(shí)還可以設(shè)置圖片的定位、超鏈接以及鼠標(biāo)經(jīng)過(guò)顯示等屬性。由于這個(gè)圖片是在列表項(xiàng)中的，因此創(chuàng)建的CSS樣式也是圍繞項(xiàng)目列表和列表項(xiàng)進(jìn)行設(shè)置的。如設(shè)置列表項(xiàng)的屬性，我們用“#zoominli{}”表示；設(shè)置列表項(xiàng)超鏈接的屬性，用“#zoominlia{}”表示。用CSS控制圖片放大的關(guān)鍵地方在于當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí)要能實(shí)現(xiàn)圖片的放大，其實(shí)本質(zhì)就是鼠標(biāo)移動(dòng)上去后的一個(gè)圖片大小變化，即用a:hover改變圖片大小，用CSS樣式表示為

“#zoominlia:hover{…}”。自學(xué)與拓展—任務(wù)一制作圖片放大特效實(shí)現(xiàn)鼠標(biāo)文字跟隨的效果項(xiàng)目任務(wù)引導(dǎo)—任務(wù)二制作廣告圖片自動(dòng)輪換本任務(wù)目標(biāo)是利用CSS實(shí)現(xiàn)浙江內(nèi)利信息技術(shù)公司網(wǎng)站首頁(yè)的廣告圖片自動(dòng)輪換特效功能。廣告圖片自動(dòng)輪換是通過(guò)圖片的自動(dòng)切換展示出各種廣告圖片，如果要瀏覽某張圖片，可以通過(guò)點(diǎn)擊圖片就可以跳轉(zhuǎn)到相應(yīng)的頁(yè)面，在這頁(yè)面里除了瀏覽此圖片之外還可以瀏覽其他相關(guān)信息，這是一種生動(dòng)形象的廣告形式項(xiàng)目任務(wù)實(shí)施—任務(wù)二制作廣告圖片自動(dòng)輪換1.添加圖片首先在page.css中注釋掉banner塊的背景顏色，并在images文件夾下面創(chuàng)建player文件夾，將下圖所示的四個(gè)用于廣告輪換播放的圖片放到該文件夾下。項(xiàng)目任務(wù)實(shí)施—任務(wù)二制作廣告圖片自動(dòng)輪換然后在index.html中banner所在的塊位置上插入這些圖片，代碼如下所示：<imgsrc="images/player/1.jpg"id="1"> <imgsrc="images/player/2.jpg"id="2"> <imgsrc="images/player/3.jpg"id="3"> <imgsrc="images/player/4.jpg"id="4"> 項(xiàng)目任務(wù)實(shí)施—任務(wù)二制作廣告圖片自動(dòng)輪換2.添加圖片輪播功能這時(shí)只能顯示第一張圖片，并沒(méi)有實(shí)現(xiàn)動(dòng)態(tài)自動(dòng)輪播的功能。為了實(shí)現(xiàn)自動(dòng)化，需要為它添加腳本語(yǔ)言，這里就是經(jīng)常會(huì)用到的JavaScript語(yǔ)言。在剛才添加的圖片代碼下面加入以下代碼：<scriptlanguage="javascript">function$(_sId){//根據(jù)對(duì)象id獲取對(duì)象的函數(shù)實(shí)現(xiàn)returndocument.getElementById(_sId);}varspeed=6000;//播放的速度，單位毫秒varsetid=null;varauto="true";//自動(dòng)播放標(biāo)志functiongalleryplay(divs,a,mtime){//自動(dòng)播放函數(shù)實(shí)現(xiàn)divs表示播放的圖片列表，a表示//自動(dòng)播放默認(rèn)開(kāi)始圖片，mtime表示播放的速度項(xiàng)目任務(wù)實(shí)施—任務(wù)二制作廣告圖片自動(dòng)輪換if(divs=="0")returnfalse; varstart=3; if(auto=="true"){ start=a-1;//圖片播放開(kāi)始標(biāo)記 speed=mtime; setid=null; varloop=function(){// ids=divs.split(",");//所有圖片都不顯示

for(vari=0;i<ids.length;i++){ $(ids[i]).style.display='none'; }//讓圖片標(biāo)記為start的圖片顯示

$(ids[start]).filters.revealTrans.Transition=Math.floor(Math.random()*23); $(ids[start]).filters.revealTrans.apply(); $(ids[start]).filters.revealTrans.play();$(ids[start]).style.display=''; setid=setTimeout(loop,speed); start++; if(start==ids.length){ start=0; } };loop();}}galleryplay('1,2,3,4',1,6000);//調(diào)用自動(dòng)播放函數(shù)</script>項(xiàng)目任務(wù)實(shí)施—任務(wù)二制作廣告圖片自動(dòng)輪換3.完善圖片輪播功能在四個(gè)圖片的img標(biāo)簽位置上為它們添加圖片轉(zhuǎn)化濾鏡和單擊彈出詳細(xì)說(shuō)明的功能。具體操作如下：在每個(gè)img標(biāo)簽中為其加入以下代碼：style="FILTER:revealTrans(duration=2,transition=16);cursor:pointer;"onclick="location.href=''"style屬性的值“FILTER:revealTrans(duration=2,transition=16);cursor:pointer;”用于為輪播的圖片轉(zhuǎn)化時(shí)實(shí)現(xiàn)的濾鏡，而onclick屬性是實(shí)現(xiàn)單擊圖片可以鏈接到某一個(gè)網(wǎng)址上。項(xiàng)目任務(wù)分析—任務(wù)二制作廣告圖片自動(dòng)輪換1.JavaScript格式上述圖片自動(dòng)輪換播放采用了JavaScript技術(shù)，從代碼中可以看到在網(wǎng)頁(yè)中嵌入JavaScript使用的是成對(duì)的標(biāo)記：<script></script>，即在網(wǎng)頁(yè)的<head></head>之間或者在<body></body>之間加入JavaScript代碼。格式如下：<scriptlanguage=＂JavaScript＂type=＂text/javascript＂><!-- JavaScript代碼編寫(xiě)//--></script>

上述代碼包含：（1）<script>標(biāo)識(shí)，即成對(duì)出現(xiàn)的<script></script>用來(lái)通知解釋器，腳本加入在此標(biāo)識(shí)之中。（2）language屬性，用來(lái)說(shuō)明在標(biāo)識(shí)之中是腳本語(yǔ)言；type屬性說(shuō)明腳本類(lèi)型。為了適應(yīng)不同瀏覽器，兩種屬性可以同時(shí)使用，也可以只使用其中一種,不寫(xiě)表示默認(rèn)。（3）<!—和//-->是html注釋標(biāo)簽，其作用用于兼容老版本的瀏覽器。項(xiàng)目任務(wù)分析—任務(wù)二制作廣告圖片自動(dòng)輪換2.JavaScript函數(shù)：圖片自動(dòng)輪換播放的JavaScript代碼中定義了函數(shù)，分別為$(),galleryplay()和loop()。將腳本編寫(xiě)為函數(shù)，就可以避免頁(yè)面載入時(shí)執(zhí)行該腳本。函數(shù)包含著一些代碼，這些代碼只能被事件激活，或者在函數(shù)被調(diào)用時(shí)才會(huì)執(zhí)行?？梢栽陧?yè)面中的任何位置調(diào)用腳本（如果函數(shù)嵌入一個(gè)外部的.js文件，那么甚至可以從其他的頁(yè)面中調(diào)用）。這里主要說(shuō)明下galleryplay（）這個(gè)函數(shù)，該函數(shù)實(shí)現(xiàn)了廣告圖片自動(dòng)輪換功能。JavaScript中創(chuàng)建函數(shù)的語(yǔ)法如下：function函數(shù)名（參數(shù)1，參數(shù)2，…，參數(shù)n）{

代碼…}自學(xué)與拓展—任務(wù)二制作廣告圖片自動(dòng)輪換1.什么是腳本語(yǔ)言？

2.<!-－

和――>的作用是什么？3.JavaScript語(yǔ)句項(xiàng)目任務(wù)引導(dǎo)—任務(wù)三制作動(dòng)態(tài)導(dǎo)航欄本任務(wù)目標(biāo)是利用CSS實(shí)現(xiàn)浙江內(nèi)利信息技術(shù)公司電子商務(wù)網(wǎng)站首頁(yè)的動(dòng)態(tài)導(dǎo)航欄特效功能。當(dāng)鼠標(biāo)經(jīng)過(guò)任意導(dǎo)航主菜單項(xiàng)時(shí)背景顏色發(fā)生改變，同時(shí)出現(xiàn)相應(yīng)的二級(jí)菜單，單擊二級(jí)菜單選項(xiàng)網(wǎng)頁(yè)會(huì)跳轉(zhuǎn)到相應(yīng)頁(yè)面項(xiàng)目任務(wù)實(shí)施—任務(wù)三制作動(dòng)態(tài)導(dǎo)航欄1.制作一級(jí)靜態(tài)導(dǎo)航欄（1）利用無(wú)序列表制作一級(jí)導(dǎo)航欄在navigator塊中加入以下代碼：<divid="nav"><ul><liid='nav1'class="nav_current"onMouseOver='javascript:doClick(this)'><ahref="http://localhost/nlsite"title="內(nèi)利">首頁(yè)</a></li><liid='nav2'class="nav_link"onMouseOver='javascript:doClick(this)'><ahref=""title="內(nèi)利">內(nèi)利新聞</a></li><liid='nav3'class="nav_link"onMouseOver='javascript:doClick(this)'><ahref=""title="內(nèi)利">招賢納士</a></li><liid='nav4'class="nav_link"onMouseOver='javascript:doClick(this)'><ahref=""title="內(nèi)利">加盟內(nèi)利</a></li>項(xiàng)目任務(wù)實(shí)施—任務(wù)三制作動(dòng)態(tài)導(dǎo)航欄<liid='nav5'class="nav_link"onMouseOver='javascript:doClick(this)'><ahref=""title="內(nèi)利">內(nèi)利卡</a></li><liid='nav6'class="nav_link"onMouseOver='javascript:doClick(this)'><ahref=""title="內(nèi)利">關(guān)于內(nèi)利</a></li><liid='nav7'class="nav_link"onMouseOver='javascript:doClick(this)'><ahref=""title="內(nèi)利">內(nèi)利商城</a></li></ul></div>項(xiàng)目任務(wù)實(shí)施—任務(wù)三制作動(dòng)態(tài)導(dǎo)航欄（2）修飾一級(jí)導(dǎo)航欄為了使列表項(xiàng)水平排列，并且消除列表項(xiàng)標(biāo)記等修飾內(nèi)容，在page.css中添加以下代碼：#nav{//導(dǎo)航欄塊樣式設(shè)置(如修改背景顏色)position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparenturl(../images/nav/blueslate_background.gif)repeat-xtopleft;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}#navul{//項(xiàng)目列表設(shè)置margin:0px;padding:0;width:auto;}項(xiàng)目任務(wù)實(shí)施—任務(wù)三制作動(dòng)態(tài)導(dǎo)航欄#navulli{//列表項(xiàng)設(shè)置display:block;float:left;margin:01px00;}#navullia{//列表項(xiàng)超鏈接設(shè)置display:block;float:left;color:#EEFFDF;text-decoration:none;padding:14px22px022px;height:28px;}.nav_current{/*float:left;*/font-size:12px;font-weight:bold;height:16px;padding-top:0;width:98px;}項(xiàng)目任務(wù)實(shí)施—任務(wù)三制作動(dòng)態(tài)導(dǎo)航欄.nav_link{float:left; font-size:12px;font-weight:bold;height:16px;padding-top:0;width:98px;}同時(shí)在images文件夾下新建nav文件夾，并將如圖所示圖片存放到該文件夾下。網(wǎng)頁(yè)預(yù)覽效果如圖項(xiàng)目任務(wù)實(shí)施—任務(wù)三制作動(dòng)態(tài)導(dǎo)航欄2.制作二級(jí)動(dòng)態(tài)導(dǎo)航欄（1）制作二級(jí)靜態(tài)導(dǎo)航欄在剛才添加的一級(jí)導(dǎo)航欄代碼后面添加以下二級(jí)靜態(tài)導(dǎo)航欄代碼：<!--導(dǎo)航滑動(dòng)二級(jí)菜單--> <divclass="sub_box_de"id="sub1"> </div> <divclass="sub_box"id="sub2"><ulid="po2"><li><ahref="#"target="_blank">媒體報(bào)道</a>

|</li><li><ahref="#"target="_blank">內(nèi)部新聞</a>

</li></ul> </div> <divclass="sub_box"id="sub3"> </div><divclass="sub_box"id="sub4"><ulid="po4"><li><ahref="#"target="_blank">加盟條件</a>

|</li><li><ahref="#"target="_blank">加盟回報(bào)</a>

|</li><li><ahref="#"target="_blank">加盟流程</a></li></ul> </div>項(xiàng)目任務(wù)實(shí)施—任務(wù)三制作動(dòng)態(tài)導(dǎo)航欄<divclass="sub_box"id="sub5"><ulid="po5"><li><ahref="#"target="_blank">什么是內(nèi)利卡</a>

|</li><li><ahref="#"target="_blank">內(nèi)利卡使用手冊(cè)</a>

|</li><li><ahref="#"target="_blank">常見(jiàn)問(wèn)題</a></li></ul> </div> <divclass="sub_box"id="sub6"><ulid="po6"><li><ahref="#"target="_blank">公司簡(jiǎn)介</a>

|</li><li><ahref="#"target="_blank">公司文化</a></li></ul> </div> <divclass="sub_box"id="sub7"> </div>項(xiàng)目任務(wù)實(shí)施—任務(wù)三制作動(dòng)態(tài)導(dǎo)航欄為了使列表項(xiàng)水平排列，并且消除列表項(xiàng)標(biāo)記等修飾內(nèi)容，在page.css中添加以下代碼：#po1{position:absolute;left:20px;}#po2{position:absolute;left:150px;}#po4{position:absolute;left:320px;}#po5{position:absolute;left:370px;}#po6{position:absolute;left:550px;}項(xiàng)目任務(wù)實(shí)施—任務(wù)三制作動(dòng)態(tài)導(dǎo)航欄（2）實(shí)現(xiàn)動(dòng)態(tài)效果這時(shí)必須建立起一級(jí)欄目到二級(jí)欄目的連接，這里回憶下前面學(xué)習(xí)的知識(shí)就可以聯(lián)想到剛學(xué)過(guò)的JavaScript函數(shù)，通過(guò)鼠標(biāo)移動(dòng)到一級(jí)導(dǎo)航欄上面來(lái)顯示二級(jí)導(dǎo)航欄，好了，思想就是這樣?，F(xiàn)在我們已經(jīng)為一級(jí)導(dǎo)航欄定義了onMouseOver操作，定義的函數(shù)名稱(chēng)為doClick(this)?，F(xiàn)在定義該函數(shù)。具體操作如下：在根目錄下新建js文件夾并在該目錄下新建menu.js文件，并在該文件中添加以下代碼：functiondoClick(o){o.className="nav_current";//當(dāng)前標(biāo)簽類(lèi)varj;varid;vare;for(vari=1;i<=10;i++){id="nav"+i; j=document.getElementById(id); e=document.getElementById("sub"+i);}else{//如果二級(jí)導(dǎo)航欄目是屬于當(dāng)前鼠標(biāo)移動(dòng)到的一級(jí)導(dǎo)航欄目下的，那么顯示這些二級(jí)導(dǎo)航欄目項(xiàng)目任務(wù)實(shí)施—任務(wù)三制作動(dòng)態(tài)導(dǎo)航欄 e.style.display="block"; }}}同時(shí)將該js文件導(dǎo)入到index.html中。具體操作為在代碼模式下的<head>標(biāo)簽中加入以下代碼：<scriptsrc='js/menu.js'rel='stylesheet'type='text/javascript'></script>項(xiàng)目任務(wù)實(shí)施—任務(wù)三制作動(dòng)態(tài)導(dǎo)航欄為了使二級(jí)導(dǎo)航欄目的樣式更加美觀(guān)，在page.css中添加以下代碼：.sub_box_de{/*float:left;*/}.sub_box{display:none;font-size:12px;}.sub_boxulli{display:inline;}.sub_boxa{color:#00008F;TEXT-DECORATION:none;}項(xiàng)目任務(wù)實(shí)施—任務(wù)三制作動(dòng)態(tài)導(dǎo)航欄3.完善動(dòng)態(tài)導(dǎo)航欄為了使得用戶(hù)將鼠標(biāo)移動(dòng)到一級(jí)導(dǎo)航欄目時(shí)實(shí)現(xiàn)顏色的變化，我們?cè)趐age.css中又加入了以下代碼：#navullia:hover,.blue#navullia.current{color:#fff;background:transparenturl(../images/nav/blueslate_backgroundOVER.gif)no-repeattopcenter;}

#navigateullia:hover{color:#fff;background:transparenturl(../images/nav/blueslate_backgroundOVER.gif)no-repeattopcenter;}同時(shí)在nav文件夾中存放如下圖所示的圖片。項(xiàng)目任務(wù)分析—任務(wù)三制作動(dòng)態(tài)導(dǎo)航欄1.理解CSS絕對(duì)位置與相對(duì)位置在CSS中，絕對(duì)定位和相對(duì)定位非常重要，理解了兩者的相同點(diǎn)與區(qū)別，你的網(wǎng)頁(yè)布局就會(huì)更加得心應(yīng)手。（1）absolute絕對(duì)定位（2）relative相對(duì)定位2.對(duì)本特效起關(guān)鍵作用的CSS代碼（1）在頁(yè)面頭部、列表等屬性設(shè)置代碼（2）在主菜單其他菜單項(xiàng)屬性設(shè)置代碼3.顯示二級(jí)導(dǎo)航欄自學(xué)與拓展—任務(wù)三制作動(dòng)態(tài)導(dǎo)航欄1.JavaScript的事件JavaScript通過(guò)對(duì)事件進(jìn)行響應(yīng)來(lái)獲得與用戶(hù)的交互。網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā)JavaScript函數(shù)的事件。例如，可以在用戶(hù)點(diǎn)擊某按鈕時(shí)產(chǎn)生一個(gè)onClick事件來(lái)觸發(fā)某個(gè)函數(shù)。事件是用戶(hù)與Web頁(yè)面交互時(shí)產(chǎn)生的操作，當(dāng)用戶(hù)進(jìn)行單擊某按鈕時(shí)，即產(chǎn)生了一個(gè)事件，需要瀏覽器進(jìn)行處理。通過(guò)學(xué)習(xí)了解常見(jiàn)Web頁(yè)面觸發(fā)事件項(xiàng)目任務(wù)引導(dǎo)—任務(wù)四制作浮動(dòng)廣告浮動(dòng)廣告是是當(dāng)前網(wǎng)上最熱門(mén)的特效之一，給人耳目一新的感覺(jué)，其主要用于一些最新廣告宣傳，使網(wǎng)頁(yè)時(shí)尚漂亮，并可以體現(xiàn)一種及時(shí)性。本任務(wù)目標(biāo)是利用CSS實(shí)現(xiàn)浙江內(nèi)利信息技術(shù)公司電子商務(wù)網(wǎng)站首頁(yè)的浮動(dòng)廣告特效功能。具體效果為廣告在頁(yè)面上按照一定的軌跡浮動(dòng)，當(dāng)鼠標(biāo)移動(dòng)到浮動(dòng)廣告上時(shí)，浮動(dòng)廣告停止運(yùn)行，便于用戶(hù)點(diǎn)擊查看詳細(xì)項(xiàng)目任務(wù)實(shí)施—任務(wù)四制作浮動(dòng)廣告1.添加浮動(dòng)廣告圖片在images目錄下新建advs文件夾。用于存放浮動(dòng)廣告圖片，并將下圖所示圖片存放到該文件夾下面。項(xiàng)目任務(wù)實(shí)施—任務(wù)四制作浮動(dòng)廣告2.實(shí)現(xiàn)廣告的浮動(dòng)在index.html的head標(biāo)簽中加入以下JavaScript代碼：<script> varRimifon={ "Ads":newObject, "NewFloatAd":function(imgUrl,strLink){ varad=document.createElement("a"); ad.DirV=true; ad.DirH=true; ad.AutoMove=true; ad.Image=newImage; ad.Seed=Math.random(); ad.Timer=setInterval("Rimifon.Float("+ad.Seed+")",50); this.Ads[ad.Seed]=ad; ad.Image.Parent=ad;ad.style.position="absolute"; ad.style.left=0; ad.style.top=0; ad.Image.src=imgUrl; ad.Image.onmouseover=function(){this.Parent.AutoMove=false;} ad.Image.onmouseout=function(){this.Parent.AutoMove=true;} if(strLink) { ad.href=strLink;

ad.Image.border=0; ad.target="_blank";

}ad.appendChild(ad.Image); document.body.appendChild(ad); returnad; },"Float":function(floatId){varad=this.Ads[floatId];

if(ad.AutoMove)項(xiàng)目任務(wù)實(shí)施—任務(wù)四制作浮動(dòng)廣告

{

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論