Image gallery

2018-05-15 17:26 更新
先決條件: 在嘗試此評估之前,您應(yīng)該已經(jīng)完成了本單元中的所有文章。
目的: 測試JavaScript循環(huán),函數(shù),條件和事件的理解。

初始點(diǎn)

要開始評估,您應(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文件最有趣的部分:

    • Absolutely position the three elements inside the 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.
    • Set the width of any images inside the 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需要:

    • Loop through all the images, and for each one insert an <img> element inside the thumb-bar <div> that will embed that image in the page.
    • Attach an 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.
    • Attach an 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.

    為了給您更多的想法,請查看完成示例 (沒有偷看源代碼!)

    步驟完成

    以下部分描述了您需要做什么。

    循環(huán)通過圖像

    我們已經(jīng)向您提供了一些行,用于存儲對縮略圖< div> 的引用,該變量名為 thumbBar ,創(chuàng)建一個新的< img&gt ; 元素,將其 src 屬性設(shè)置為占位符值 xxx ,并將< img> > thumbBar 。

    你需要:

    1. Put the section of code below the "Looping through images" comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image.
    2. In each loop iteration, replace the 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.

    向每個縮略圖圖像添加onclick處理程序

    在每個循環(huán)迭代中,您需要向當(dāng)前 newImage 添加 onclick 處理程序 - 應(yīng)該:

    1. Find the value of the 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?
    2. Run a function, passing it the returned src value as a parameter. You can call this function whatever you like.
    3. This event handler function should set the 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.

    編寫一個運(yùn)行dark / lighten按鈕的處理程序

    我們已經(jīng)提供了一行代碼,用來存儲對< button> 的引用,這個變量叫做 btn 。 您需要添加 onclick 處理程序:

    1. Checks the current class name set on the <button> — you can again achieve this by using getAttribute().
    2. If the class name is "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)".
    3. If the class name not "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;

    提示和提示

    • You don't need to edit the HTML or CSS in any way.

    評定

    如果您作為有組織課程的一部分參加此評估,您應(yīng)該能夠?qū)⒛墓ぷ鹘唤o您的老師/導(dǎo)師進(jìn)行標(biāo)記。 如果您是自學(xué)習(xí)的,那么您可以輕松地通過 dev-mdc 郵件列表,或者在 #mdn IRC頻道中。 org / IRC"class ="external"> Mozilla IRC 。 嘗試練習(xí)第一 - 沒有什么可以通過作弊獲得!

    以上內(nèi)容是否對您有幫助:
    在線筆記
    App下載
    App下載

    掃描二維碼

    下載編程獅App

    公眾號
    微信公眾號

    編程獅公眾號