先決條件: | 在嘗試此評估之前,您應(yīng)該已經(jīng)完成了本單元中的所有文章。 |
---|---|
目的: | 測試JavaScript循環(huán),函數(shù),條件和事件的理解。 |
要開始評估,您應(yīng)該去 獲取示例的ZIP 文件,并將其解壓縮到計(jì)算機(jī)上的某個位置。
注意:或者,您也可以使用 JSBin 或 "https://thimble.mozilla.org/"class ="external-icon external"> Thimble 來做你的評估。 您可以將HTML,CSS和JavaScript粘貼到其中一個在線編輯器。 如果您使用的在線編輯器沒有單獨(dú)的JavaScript / CSS面板,請隨意將它們放入HTML中的< script>
/ < style>
頁。
您已獲得一些HTML,CSS和圖片資源以及幾行JavaScript代碼; 您需要編寫必要的JavaScript才能將其轉(zhuǎn)換為工作程序。 HTML主體如下所示:
<h1>Image gallery example</h1> <div class="full-img"> <img class="displayed-img" src="images/pic1.jpg"> <div class="overlay"></div> <button class="dark">Darken</button> </div> <div class="thumb-bar"> </div>
示例如下所示:
alt ="">
示例的CSS文件最有趣的部分:
full-img <div>
— the <img>
in which the full-sized image is displayed, an empty <div>
that is sized to be the same size as the <img>
and put right over the top of it (this is used to apply a darkening effect to the image via a semi-transparent background color), and a <button>
that is used to control the darkening effect.thumb-bar <div>
(so-called "thumbnail" images) to 20%, and float them to the left so they sit next to one another on a line.您的JavaScript需要:
<img>
element inside the thumb-bar <div>
that will embed that image in the page.onclick
handler to each <img>
inside the thumb-bar <div>
so that when they are clicked, the corresponding image will be displayed in the displayed-img <img>
element.onclick
handler to the <button>
so that when it is clicked, a darken effect is applied to the full-size image. When it is clicked again, the darken effect is removed again.為了給您更多的想法,請查看完成示例 (沒有偷看源代碼!)
以下部分描述了您需要做什么。
我們已經(jīng)向您提供了一些行,用于存儲對縮略圖< div>
的引用,該變量名為 thumbBar
,創(chuàng)建一個新的< img>
; 元素,將其 src
屬性設(shè)置為占位符值 xxx
,并將< img>
> thumbBar 。
你需要:
xxx
placeholder value with a string that will equal the path to the image in each case. We are setting the value of the src
attribute to this value in each case. Bear in mind that in each case, the image is inside the images directory and its name is pic1.jpg
, pic2.jpg
, etc.在每個循環(huán)迭代中,您需要向當(dāng)前 newImage
添加 onclick
處理程序 - 應(yīng)該:
src
attribute of the current image. This can be done by running the getAttribute()
function on the <img>
in each case, and passing it a parameter of "src"
in each case. But how to get the image? Using newImage
won't work, as the loop is completed before the event handlers are applied; doing it this way would result in the src
value of the last <img>
being returned in every case. To solve this, bear in mind that in the case of each event handler, the <img>
is the target of the handler. How about getting the information from the event object?src
value as a parameter. You can call this function whatever you like.src
attribute value of the displayed-img <img>
to the src
value passed in as a parameter. We've already provided you with a line that stores a reference to the relevant <img>
in a variable called displayedImg
. Note that we want a defined named function here.我們已經(jīng)提供了一行代碼,用來存儲對< button>
的引用,這個變量叫做 btn 。 您需要添加
onclick
處理程序:
<button>
— you can again achieve this by using getAttribute()
."dark"
, changes the <button>
class to "light"
(using setAttribute()
), its text content to "Lighten", and the background-color
of the overlay <div>
to "rgba(0,0,0,0.5)"
."dark"
, changes the <button>
class to "dark"
, its text content back to "Darken", and the background-color
of the overlay <div>
to "rgba(0,0,0,0)"
.以下各條為實(shí)現(xiàn)上文第2和第3點(diǎn)規(guī)定的變動提供了基礎(chǔ)。
btn.setAttribute('class', xxx); btn.textContent = xxx; overlay.style.backgroundColor = xxx;
如果您作為有組織課程的一部分參加此評估,您應(yīng)該能夠?qū)⒛墓ぷ鹘唤o您的老師/導(dǎo)師進(jìn)行標(biāo)記。 如果您是自學(xué)習(xí)的,那么您可以輕松地通過 dev-mdc 郵件列表,或者在 #mdn IRC頻道中。 org / IRC"class ="external"> Mozilla IRC 。 嘗試練習(xí)第一 - 沒有什么可以通過作弊獲得!
更多建議: