jQuery中的more功能是用于展示/隱藏大段文字的插件,也可以用于展示/隱藏更多的圖片。下面是一些關(guān)于使用這個(gè)插件的示例。
// HTML代碼// JS代碼 // 通過(guò)JavaScript來(lái)對(duì)more進(jìn)行初始化 $('.more').more({ link: '.show-more', // 顯示更多的鏈接的class名 linkTextOpen: '顯示更多', // 展開(kāi)時(shí)鏈接的文本 linkTextClose: '收起', // 收起時(shí)鏈接的文本 animationSpeed: 400, // 動(dòng)畫(huà)速度 shadow: true, //是否添加陰影背景來(lái)增強(qiáng)可讀性 });
上面的代碼演示了如何使用jQuery的more插件來(lái)展示/隱藏一段文本。在這個(gè)例子中,我們將文本加入一個(gè)DIV中,并為其添加一個(gè)顯示更多鏈接。
我們還可以使用more插件來(lái)展示/隱藏圖片。下面是一個(gè)針對(duì)圖片的示例:
// HTML代碼// JS代碼 // 通過(guò)JavaScript來(lái)對(duì)more進(jìn)行初始化 $('.more').more({ link: '.show-more', // 顯示更多的鏈接的class名 linkTextOpen: '查看更多圖片', // 展開(kāi)時(shí)鏈接的文本 linkTextClose: '收起', // 收起時(shí)鏈接的文本 animationSpeed: 400, // 動(dòng)畫(huà)速度 shadow: true, //是否添加陰影背景來(lái)增強(qiáng)可讀性 });點(diǎn)擊下方按鈕來(lái)查看更多圖片。
查看更多圖片
在這個(gè)例子中,我們使用more插件來(lái)展示/隱藏一組圖片。在DIV中,我們加入了顯示更多鏈接,并將圖片加入一個(gè)DIV。在初始化時(shí),我們?cè)O(shè)置了展開(kāi)鏈接的文本與收起鏈接的文本,以及動(dòng)畫(huà)速度。我們還為more插件設(shè)置了陰影背景來(lái)增強(qiáng)可讀性。
總的來(lái)說(shuō),more插件是jQuery的一個(gè)實(shí)用工具,用于展示/隱藏長(zhǎng)段落的文本或大量的圖片。
上一篇廣汽傳css31.5