jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第6章 jQuery實(shí)現(xiàn)圖像效果_第1頁(yè)
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第6章 jQuery實(shí)現(xiàn)圖像效果_第2頁(yè)
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第6章 jQuery實(shí)現(xiàn)圖像效果_第3頁(yè)
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第6章 jQuery實(shí)現(xiàn)圖像效果_第4頁(yè)
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第6章 jQuery實(shí)現(xiàn)圖像效果_第5頁(yè)
已閱讀5頁(yè)，還剩51頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第6章jQuery實(shí)現(xiàn)圖像效果《jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程》學(xué)習(xí)目標(biāo)/Target掌握removeAttr()方法的使用方法，能夠使用removeAttr()方法刪除

指定元素的一個(gè)或多個(gè)屬性掌握nextAll()方法的使用方法，能夠使用nextAll()方法獲取指定元素

之后的所有同級(jí)元素掌握prevAll()方法的使用方法，能夠使用prevAll()方法獲取指定元素

之前的所有同級(jí)元素掌握鼠標(biāo)指針的位置坐標(biāo)的獲取方法，能夠使用事件對(duì)象中的offsetX、

offsetY、clientX和clientY屬性來(lái)獲取鼠標(biāo)指針的位置學(xué)習(xí)目標(biāo)/Target掌握星級(jí)評(píng)價(jià)的實(shí)現(xiàn)方法，能夠完成星級(jí)評(píng)價(jià)功能的開發(fā)掌握?qǐng)D像拖曳的實(shí)現(xiàn)方法，能夠完成圖像拖曳功能的開發(fā)

掌握?qǐng)D像切換的實(shí)現(xiàn)方法，能夠完成圖像切換功能的開發(fā)章節(jié)概述/Summary在網(wǎng)頁(yè)設(shè)計(jì)中，合理運(yùn)用圖像可以提升用戶體驗(yàn)。圖像不僅能夠美化頁(yè)面，還能幫助用戶更好地理解和記憶所呈現(xiàn)的信息。因此，在網(wǎng)頁(yè)設(shè)計(jì)中，合理選擇和運(yùn)用圖像至關(guān)重要。本章將詳細(xì)講解如何使用jQuery實(shí)現(xiàn)圖像效果。目錄/Contents任務(wù)6.1星級(jí)評(píng)價(jià)任務(wù)6.2圖像拖曳任務(wù)6.3圖像切換星級(jí)評(píng)價(jià)任務(wù)6.1任務(wù)需求隨著網(wǎng)購(gòu)的普及，用戶在完成訂單后，通?？梢允褂迷u(píng)價(jià)功能對(duì)購(gòu)買的商品或服務(wù)進(jìn)行評(píng)價(jià)。這種評(píng)價(jià)方式可以幫助商家獲得用戶的反饋，以便改善用戶體驗(yàn)和提高服務(wù)質(zhì)量。星級(jí)評(píng)價(jià)是一種常見的評(píng)價(jià)方式，用戶可以通過點(diǎn)亮特定數(shù)量的星星來(lái)表示他們的滿意度。這種評(píng)價(jià)方式簡(jiǎn)單明了，星星的數(shù)量越多，代表用戶越滿意，同時(shí)商家也會(huì)因此獲得更高的信譽(yù)度。星級(jí)評(píng)價(jià)的開發(fā)需求如下。任務(wù)需求①初始頁(yè)面中顯示5個(gè)灰色的星星，表示未評(píng)價(jià)，如下圖所示。②當(dāng)鼠標(biāo)指針移入某個(gè)星星時(shí)，該星星及前面的星星都會(huì)被點(diǎn)亮。當(dāng)鼠標(biāo)指針移出所有星星（即鼠標(biāo)指針不在任意一個(gè)星星上）時(shí)，所有星星都恢復(fù)成灰色。鼠標(biāo)指針移入第3個(gè)星星和移出所有星星的效果如下圖所示。任務(wù)需求③單擊某個(gè)星星即可完成評(píng)價(jià)，該星星及前面的星星都被點(diǎn)亮。單擊某個(gè)星星后移出鼠標(biāo)指針（即鼠標(biāo)指針不在任意星星上），該星星及前面的星星保持被點(diǎn)亮的狀態(tài)。鼠標(biāo)指針單擊第4個(gè)星星并移出所有星星的效果如下圖所示。任務(wù)需求知識(shí)儲(chǔ)備1.removeAttr()方法

先定一個(gè)小目標(biāo)！掌握removeAttr()方法的使用方法，能夠使用removeAttr()方法刪除指定元素的一個(gè)或多個(gè)屬性知識(shí)儲(chǔ)備1.removeAttr()方法在HTML中，每個(gè)元素都可以具有多個(gè)屬性，例如id、class、href等。有時(shí)候可能需要?jiǎng)h除指定元素的一個(gè)或多個(gè)屬性，如何實(shí)現(xiàn)呢？知識(shí)儲(chǔ)備1.removeAttr()方法可以通過jQuery中的removeAttr()方法來(lái)實(shí)現(xiàn)。removeAttr()方法的語(yǔ)法格式如下。removeAttr(attributeName)attributeName表示屬性名，多個(gè)屬性名用空格分隔例如，$('.box').removeAttr('id')可以刪除.box類的元素的id屬性；$('p').removeAttr('idclass')可以刪除所有p元素的id和class屬性。知識(shí)儲(chǔ)備1.removeAttr()方法下面通過代碼演示如何使用removeAttr()方法實(shí)現(xiàn)單擊“刪除屬性”按鈕時(shí)，刪除所有p元素的style屬性，示例代碼如下。<body><pstyle="font-weight:bold">白日依山盡，黃河入海流。</p><pstyle="font-weight:bold">欲窮千里目，更上一層樓。</p><button>刪除屬性</button><script>$('button').on('click',function(){$('p').removeAttr('style');});</script></body>知識(shí)儲(chǔ)備1.removeAttr()方法上述示例代碼運(yùn)行后，使用removeAttr()方法實(shí)現(xiàn)的頁(yè)面效果如下圖所示。知識(shí)儲(chǔ)備1.removeAttr()方法單擊“刪除屬性”按鈕后的頁(yè)面效果如下圖所示。知識(shí)儲(chǔ)備2.nextAll()方法

先定一個(gè)小目標(biāo)！掌握nextAll()方法的使用方法，能夠使用nextAll()方法獲取指定元素之后的所有同級(jí)元素知識(shí)儲(chǔ)備2.nextAll()方法在網(wǎng)頁(yè)中，如果選擇了某個(gè)特定元素，可能會(huì)對(duì)其后面的元素執(zhí)行特定的操作。在jQuery中，可以通過使用nextAll()方法獲取指定元素之后的所有同級(jí)元素，但不包括該元素本身，其語(yǔ)法格式如下。nextAll([selector])可選參數(shù)selector表示選擇器，用于匹配指定的元素知識(shí)儲(chǔ)備2.nextAll()方法當(dāng)省略selector參數(shù)時(shí)，nextAll()方法會(huì)返回指定元素之后的所有同級(jí)元素。例如，$('li.start').nextAll()會(huì)返回每個(gè).start類的li元素之后的所有同級(jí)元素。當(dāng)不省略selector參數(shù)時(shí)，nextAll()方法會(huì)返回指定元素之后的所有同級(jí)元素中符合選擇器條件的元素。例如，$('div').nextAll('p')會(huì)返回每個(gè)div元素之后的所有同級(jí)p元素，$('div').nextAll('.class1,.class2')會(huì)返回每個(gè)div元素之后的所有.class1類和.class2類的元素。知識(shí)儲(chǔ)備2.nextAll()方法下面通過代碼演示如何使用nextAll()方法實(shí)現(xiàn)更改指定元素之后所有同級(jí)元素的CSS樣式，示例代碼如下。<body><ul><li>學(xué)而時(shí)習(xí)之，不亦說(shuō)乎？</li><li>學(xué)而不思則罔，思而不學(xué)則殆。</li><liclass="item">學(xué)而不厭，誨人不倦。</li><li>敏而好學(xué)，不恥下問。</li><li>篤信好學(xué)，守死善道。</li></ul>知識(shí)儲(chǔ)備2.nextAll()方法>>接上頁(yè)代碼<script>

$('li.item').nextAll().css('font-weight','bold');</script></body>知識(shí)儲(chǔ)備2.nextAll()方法上述示例代碼運(yùn)行后，使用nextAll()方法實(shí)現(xiàn)的頁(yè)面效果如下圖所示。知識(shí)儲(chǔ)備3.prevAll()方法

先定一個(gè)小目標(biāo)！掌握prevAll()方法的使用方法，能夠使用prevAll()方法獲取指定元素之前的所有同級(jí)元素知識(shí)儲(chǔ)備假設(shè)有一個(gè)文章頁(yè)面，頁(yè)面上有一系列的文章卡片?，F(xiàn)在想找到選定文章卡片之前的所有文章卡片，以便對(duì)它們進(jìn)行一些操作，比如高亮顯示，這時(shí)便可以使用jQuery中的prevAll()方法。prevAll()方法用于獲取指定元素之前的所有同級(jí)元素，但不包括該元素本身，其語(yǔ)法格式如下。prevAll([selector])可選參數(shù)selector表示選擇器，用于匹配指定的元素3.prevAll()方法知識(shí)儲(chǔ)備當(dāng)省略selector參數(shù)時(shí)，prevAll()方法會(huì)返回指定元素之前的所有同級(jí)元素。例如，$('li.start').prevAll()會(huì)返回每個(gè).start類的li元素之前的所有同級(jí)元素。當(dāng)不省略selector參數(shù)時(shí)，prevAll()方法會(huì)返回指定元素之前的所有同級(jí)元素中符合選擇器條件的元素。例如，$('div').prevAll('p')會(huì)返回每個(gè)div元素之前的所有同級(jí)p元素，$('p').prevAll('.class1,.class2')會(huì)返回每個(gè)p元素之前的所有.class1類和.class2類的元素。3.prevAll()方法知識(shí)儲(chǔ)備下面通過代碼演示如何使用prevAll()方法實(shí)現(xiàn)更改指定元素之前所有同級(jí)元素的CSS樣式，示例代碼如下。<body><p>二十四節(jié)氣歌</p><ul><li>春雨驚春清谷天，夏滿芒夏暑相連。</li><li>秋處露秋寒霜降，冬雪雪冬小大寒。</li><liclass="item">每月兩節(jié)不變更，最多相差一兩天。</li><li>上半年來(lái)六廿一，下半年是八廿三。</li></ul>3.prevAll()方法知識(shí)儲(chǔ)備>>接上頁(yè)代碼<script>$('li.item').prevAll().css('font-weight','bold');</script></body>3.prevAll()方法知識(shí)儲(chǔ)備上述示例代碼運(yùn)行后，使用prevAll()方法實(shí)現(xiàn)的頁(yè)面效果如下圖所示。3.prevAll()方法任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握星級(jí)評(píng)價(jià)的實(shí)現(xiàn)方法，能夠完成星級(jí)評(píng)價(jià)功能的開發(fā)任務(wù)實(shí)現(xiàn)創(chuàng)建D:\jQuery\chapter06目錄，將jquery-3.6.4.min.js文件和本章配套源代碼中的images文件夾復(fù)制到該目錄，并使用VSCode編輯器打開該目錄。創(chuàng)建star.html文件，編寫星級(jí)評(píng)價(jià)頁(yè)面的結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。步驟1步驟2編寫星級(jí)評(píng)價(jià)的樣式代碼。編寫邏輯代碼，實(shí)現(xiàn)鼠標(biāo)指針移入、鼠標(biāo)指針移出、單擊星星時(shí)的頁(yè)面效果。步驟3步驟4實(shí)現(xiàn)星級(jí)評(píng)價(jià)的開發(fā)任務(wù)實(shí)現(xiàn)在瀏覽器中打開star.html文件，星級(jí)評(píng)價(jià)的初始頁(yè)面效果如下圖所示。任務(wù)實(shí)現(xiàn)當(dāng)鼠標(biāo)指針移入第2個(gè)星星時(shí)，頁(yè)面效果如下圖所示。任務(wù)實(shí)現(xiàn)單擊第5個(gè)星星進(jìn)行星級(jí)評(píng)價(jià)，完成星級(jí)評(píng)價(jià)的頁(yè)面效果如下圖所示。圖像拖曳任務(wù)6.2任務(wù)需求小冬是負(fù)責(zé)開發(fā)在線相冊(cè)的前端開發(fā)人員。為了提升用戶的使用體驗(yàn)，他決定在相冊(cè)中引入一個(gè)新的功能——圖像拖曳。這個(gè)功能將使用戶能夠通過簡(jiǎn)單的拖曳操作來(lái)調(diào)整收藏的圖像的順序，從而更個(gè)性化地組織和展示照片。圖像拖曳的開發(fā)需求如下。任務(wù)需求頁(yè)面中包含“圖像拖曳”文本和圖像。將鼠標(biāo)指針移到頁(yè)面中的“圖像拖曳”文本上，按住鼠標(biāo)左鍵，拖曳操作開始。按住鼠標(biāo)左鍵并拖動(dòng)鼠標(biāo)指針，文本和圖像會(huì)跟隨鼠標(biāo)指針移動(dòng)。釋放鼠標(biāo)左鍵，拖曳操作結(jié)束，文本和圖像停止跟隨鼠標(biāo)指針移動(dòng)。圖像拖曳的初始效果如下圖所示。任務(wù)需求知識(shí)儲(chǔ)備鼠標(biāo)指針的位置坐標(biāo)

先定一個(gè)小目標(biāo)！掌握鼠標(biāo)指針的位置坐標(biāo)的獲取方法，能夠使用事件對(duì)象中的offsetX、offsetY、clientX和clientY屬性來(lái)獲取鼠標(biāo)指針的位置知識(shí)儲(chǔ)備鼠標(biāo)指針的位置坐標(biāo)在網(wǎng)頁(yè)開發(fā)中，可以利用鼠標(biāo)指針的位置坐標(biāo)來(lái)實(shí)現(xiàn)一些交互效果，比如鼠標(biāo)懸停提示和拖曳元素等。鼠標(biāo)指針的位置坐標(biāo)是指鼠標(biāo)指針相對(duì)于事件觸發(fā)元素或在瀏覽器當(dāng)前視口中的x軸、y軸坐標(biāo)。知識(shí)儲(chǔ)備鼠標(biāo)指針的位置坐標(biāo)當(dāng)事件被觸發(fā)時(shí)，就會(huì)產(chǎn)生事件對(duì)象。通過事件對(duì)象的offsetX、offsetY、clientX和clientY屬性可以獲取鼠標(biāo)指針的位置坐標(biāo)。offsetX和offsetY表示鼠標(biāo)指針相對(duì)于事件觸發(fā)元素的x軸、y軸坐標(biāo)。clientX和clientY表示鼠標(biāo)指針在瀏覽器當(dāng)前視口中的x軸、y軸坐標(biāo)。知識(shí)儲(chǔ)備鼠標(biāo)指針的位置坐標(biāo)下面通過示意圖來(lái)展示事件對(duì)象的offsetX、offsetY、clientX和clientY屬性，如下圖所示。知識(shí)儲(chǔ)備鼠標(biāo)指針的位置坐標(biāo)下面通過代碼演示如何使用事件對(duì)象的屬性來(lái)獲取鼠標(biāo)指針的位置坐標(biāo)，示例代碼如下。<body><divid="box">獲取鼠標(biāo)指針的位置坐標(biāo)</div><script>$('#box').on('click',function(e){console.log(e.offsetX,e.offsetY,e.clientX,e.clientY);});</script></body>知識(shí)儲(chǔ)備鼠標(biāo)指針的位置坐標(biāo)上述示例代碼運(yùn)行后，單擊“獲取鼠標(biāo)指針的位置坐標(biāo)”文本的某處，控制臺(tái)的輸出結(jié)果如下圖所示。76、9分別表示鼠標(biāo)指針相對(duì)于事件觸發(fā)元素的x軸、y軸坐標(biāo)84、17分別表示鼠標(biāo)指針在瀏覽器當(dāng)前視口中的x軸、y軸坐標(biāo)任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握?qǐng)D像拖曳的實(shí)現(xiàn)方法，能夠完成圖像拖曳功能的開發(fā)任務(wù)實(shí)現(xiàn)將本章配套源代碼中的css文件夾復(fù)制到chapter06目錄。創(chuàng)建pictureDrag.html文件，編寫圖像拖曳的相關(guān)代碼，并引入jquery-3.6.4.min.js文件，以及css目錄下的pictureDrag.css文件。步驟1步驟2編寫邏輯代碼，定義所需的變量。編寫邏輯代碼，實(shí)現(xiàn)按住鼠標(biāo)左鍵時(shí)開始拖曳操作的功能。步驟3步驟4實(shí)現(xiàn)圖像拖曳功能的開發(fā)編寫邏輯代碼，實(shí)現(xiàn)按住鼠標(biāo)左鍵并拖動(dòng)鼠標(biāo)時(shí)元素跟隨鼠標(biāo)指針移動(dòng)的功能。步驟5編寫邏輯代碼，實(shí)現(xiàn)抬起鼠標(biāo)左鍵時(shí)結(jié)束拖曳的功能。步驟6任務(wù)實(shí)現(xiàn)在瀏覽器中打開pictureDrag.html文件，圖像拖曳的頁(yè)面效果如下圖所示。任務(wù)實(shí)現(xiàn)將鼠標(biāo)指針移到頁(yè)面上的“圖像拖曳”文本上并按住鼠標(biāo)左鍵，拖曳操作開始。將圖像拖曳到頁(yè)面中心位置的頁(yè)面效果如下圖所示。圖像切換任務(wù)6.3任務(wù)需求小夏是負(fù)責(zé)開發(fā)風(fēng)景網(wǎng)站首頁(yè)的前端開發(fā)人員。為了增加網(wǎng)站的吸引力，小夏需要在首頁(yè)中添加圖像切換功能。這個(gè)功能可以吸引用戶的注意力，提供動(dòng)態(tài)效果和增加視覺吸引力，從而提升用戶的興趣。圖像切換的開發(fā)需求是：當(dāng)用戶單

溫馨提示

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

評(píng)論

0/150

提交評(píng)論