jQuery中圖片展示插件highslide.js的簡單dom
前言
今天用用了一款圖片展示插件highslide.js,感覺用起來很是舒暢,幾乎不用怎么寫代碼,只需要知道如何寫參數(shù)就行了。
那么這么牛叉的插件我們該如何用哪,下面我就跟大家講解一下。
一、引入
首先我們運(yùn)用絕對路徑引入,這一般都是在實(shí)際項(xiàng)目中引用的方法,我們下載時候會有個文件包,里面包含樣式文件和腳本文件。
用的時候只需引入這兩個文件即可,然后代碼中這樣寫:
<link rel="stylesheet" type="text/css" href="<%=controller.getStaticPath(request)%>/js/highslide.css" rel="external nofollow" /> <script type="text/javascript" src="<%=controller.getStaticPath(request)%>/js/highslide-with-gallery.js"></script>
我這項(xiàng)目是jsp文件,所以說引入的根目錄的方式不同,小伙伴們可以根據(jù)自己的項(xiàng)目來具體如何引入吧。
然后我們要做的是調(diào)用我們的插件,傳入?yún)?shù):
二、配置參數(shù)
上面是我的參數(shù)配置圖
hs.graphicsDir = '<%=controller.getStaticPath(request)%>/js/graphics/'; hs.align = 'center'; hs.transitions = ['expand', 'crossfade']; hs.wrapperClassName = 'dark borderless floating-caption'; hs.fadeInOut = true; hs.dimmingOpacity = 0.75; // Add the controlbar if (hs.addSlideshow) hs.addSlideshow({ //slideshowGroup: 'group1', interval: 5000, repeat: false, useControls: true, fixedControls: 'fit', overlayOptions: { opacity: .6, position: 'bottom center', hideOnMouseOut: true } });
上面的代碼除了文件地址需要根據(jù)自己的路徑配置外,其他的都可以不用改變。
三、如何展示
插件配備好了我們該如何將我們的圖片展示出來哪,這個更簡單了。
上圖幾個箭頭指示的方向是一定要配置的。
1、最外層div的類名要是highslide-gallery,這樣的話我們完成的圖片展示就輪播會展示這層div內(nèi)的所有圖片。
2、圖片外層要包裹一個A標(biāo)簽,并且A標(biāo)簽的地址要是真正大圖的地址,也就是要展示圖片的地址。然后在給A價格點(diǎn)擊事件onclick="return hs.expand(this)
,不加的話會使點(diǎn)擊沒有效果。
記住點(diǎn)擊事件的寫法return hs.expand(this)
,其實(shí)這樣就能完成一個小圖點(diǎn)擊展示大圖播放的交互效果了。當(dāng)然也可以把圖片改成文字或其他的,這樣也能完成點(diǎn)擊展示的功能。下面就給大家看一下最終的效果吧。
四、展示效果
這是點(diǎn)擊前
這是點(diǎn)擊后,是不是很簡單。其實(shí)難點(diǎn)在于配置參數(shù),但是我已經(jīng)配置了,所以各位大大就很輕松的使用吧。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
jquery實(shí)現(xiàn)智能感知連接外網(wǎng)搜索
注意引用的插件及順序;搜索獲取選擇的值,智能感知連接外網(wǎng)搜索,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈,希望對你大家有所幫助2013-05-05jQuery實(shí)現(xiàn)模擬marquee標(biāo)簽效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)模擬marquee標(biāo)簽效果的相關(guān)資料,需要的朋友可以參考下2015-07-07jQuery實(shí)時顯示鼠標(biāo)指針位置和鍵盤ASCII碼
本文通過jquery技術(shù)實(shí)現(xiàn)鼠標(biāo)指針位置和鍵盤ASCII碼,非常具有參考借鑒價值,感興趣的朋友一起學(xué)習(xí)吧2016-03-03使用jQuery簡化Ajax開發(fā) Ajax開發(fā)入門
jQuery是一個可以簡化 JavaScript™以及AJAX(Asynchronous JavaScript + XML,異步Javascript和XML)編程的Javascript庫。不同于其他的Javascript庫,jQuery有他自己的哲學(xué),使你可以 很簡單的編寫代碼。2009-10-10用jQuery獲取table中行id和td值的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄胘Query獲取table中行id和td值的實(shí)現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05