建站
咨詢
售后
建站咨詢
新聞中心
Foundation 圖片
Foundation 提供了響應(yīng)式的圖片，可以創(chuàng)建縮略圖和圖片彈窗：
嘗試一下 ?
縮略圖
在 標(biāo)簽中添加 .th 類將圖片設(shè)置為縮略圖。 鼠標(biāo)移動到上面會顯示一個淺藍色外框:
實例
<
a
href=
"paris.jpg"
class=
"th"
>
<
img
src=
"paris.jpg"
alt=
"Paris"
>
<
/a
>
嘗試一下 ?
| 響應(yīng)式圖片 Foundation 中圖片默認是響應(yīng)式的。我們可以在實例頁面重置瀏覽器大小來查看圖片縮放效果。 |
圓角圖片
我們可以在 .th 類添加 .radius 類來設(shè)置圓角縮略圖：
實例
<
a
href=
"paris.jpg"
class=
"th radius"
>
<
img
src=
"paris.jpg"
alt=
"Paris"
>
<
/a
>
嘗試一下 ?
簡潔的彈窗
Foundation 可以很容易實現(xiàn)圖片彈窗。
要創(chuàng)建一個彈窗可以在 元素上添加 .clearing-thumbs 類及 data-clearing 屬性。在
注意: 圖片彈窗需要 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 屬性到每個圖片來設(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)你需要實現(xiàn)只顯示一張縮略圖時你可以在 中使用 .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
>
嘗試一下 ?
新聞名稱：創(chuàng)新互聯(lián)Foundation教程：Foundation圖片
鏈接分享：http://fisionsoft.com.cn/article/dphchdc.html
