掃二維碼與項(xiàng)目經(jīng)理溝通
我們?cè)谖⑿派?4小時(shí)期待你的聲音
解答本文疑問(wèn)/技術(shù)咨詢/運(yùn)營(yíng)咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
Foundation 提供了響應(yīng)式的圖片,可以創(chuàng)建縮略圖和圖片彈窗:

嘗試一下 ?
在 標(biāo)簽中添加 .th 類將圖片設(shè)置為縮略圖。 鼠標(biāo)移動(dòng)到上面會(huì)顯示一個(gè)淺藍(lán)色外框:
<
a
href=
"paris.jpg"
class=
"th"
>
<
img
src=
"paris.jpg"
alt=
"Paris"
>
<
/a
>
嘗試一下 ?
| 響應(yīng)式圖片 Foundation 中圖片默認(rèn)是響應(yīng)式的。我們可以在實(shí)例頁(yè)面重置瀏覽器大小來(lái)查看圖片縮放效果。 |
我們可以在 .th 類添加 .radius 類來(lái)設(shè)置圓角縮略圖:
<
a
href=
"paris.jpg"
class=
"th radius"
>
<
img
src=
"paris.jpg"
alt=
"Paris"
>
<
/a
>
嘗試一下 ?
Foundation 可以很容易實(shí)現(xiàn)圖片彈窗。
要?jiǎng)?chuàng)建一個(gè)彈窗可以在 元素上添加 .clearing-thumbs 類及 data-clearing 屬性。在 內(nèi)添加圖片列表。
注意: 圖片彈窗需要 JavaScript。所以使用它前需要初始化 Foundation JS。
<
ul
class=
"clearing-thumbs"
data-clearing
>
<
li
>
<
a
href=
"rock600x400.jpg"
class=
"th"
>
<
img
src=
"rock200x100.jpg"
>
<
/a
>
<
/li
>
<
li
>
<
a
href=
"skies600x400.jpg"
class=
"th"
>
<
img
src=
"skies200x100.jpg"
>
<
/a
>
<
/li
>
<
li
>
<
a
href=
"lights600x400.jpg"
class=
"th"
>
<
img
src=
"lights200x100.jpg"
>
<
/a
>
<
/li
>
<
/ul
>
<
script
>
$(document).ready(function() {
$(document).foundation();
})
<
/script
>
嘗試一下 ?
可以添加 data-caption 屬性到每個(gè)圖片來(lái)設(shè)置圖片的描述:
<
ul
class=
"clearing-thumbs"
data-clearing
>
<
li
>
<
a
href=
"rock600x400.jpg"
class=
"th"
>
<
img
data-caption=
"The Pulpit Rock"
src=
"rock200x100.jpg"
>
<
/a
>
<
/li
>
<
li
>
<
a
href=
"skies600x400.jpg"
class=
"th"
>
<
img
data-caption=
"Sunrise Skies"
src=
"skies200x100.jpg"
>
<
/a
>
<
/li
>
<
li
>
<
a
href=
"lights600x400.jpg"
class=
"th"
>
<
img
data-caption=
"Northern Lights"
src=
"lights200x100.jpg"
>
<
/a
>
<
/li
>
<
/ul
>
嘗試一下 ?
提示: 你可以在 data-caption 屬性中添加 HTML 元素,如 data-caption="Pulpit RockLocated in Norway " |
當(dāng)你需要實(shí)現(xiàn)只顯示一張縮略圖時(shí)你可以在 中使用 .clearing-feature 類并在 中使用 .clearing-featured-img 類。
<
ul
class=
"clearing-thumbs clearing-feature"
data-clearing
>
<
li
>
<
a
href=
"rock600x400.jpg"
class=
"th"
>
<
img
data-caption=
"The Pulpit Rock"
src=
"rock200x100.jpg"
>
<
/a
>
<
/li
>
<
li
>
<
a
href=
"skies600x400.jpg"
class=
"th"
>
<
img
data-caption=
"Sunrise Skies"
src=
"skies200x100.jpg"
>
<
/a
>
<
/li
>
<
li
class=
"clearing-featured-img"
>
<
a
href=
"lights600x400.jpg"
class=
"th"
>
<
img
data-caption=
"Northern Lights"
src=
"lights200x100.jpg"
>
<
/a
>
<
/li
>
<
/ul
>
嘗試一下 ?

我們?cè)谖⑿派?4小時(shí)期待你的聲音
解答本文疑問(wèn)/技術(shù)咨詢/運(yùn)營(yíng)咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流