Html5插件教程之添加瀏覽器放大鏡效果的商品櫥窗

KeyMob移動端廣告平臺為應(yīng)用開發(fā)者和廣告主提供應(yīng)用交叉推廣、手機(jī)廣告優(yōu)化等一站式移動營銷解決方案,使應(yīng)用開發(fā)者和廣告主獲得價(jià)值的最大化。
一、使用方法
<link rel="stylesheet" href="css/smoothproducts.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/smoothproducts.min.js"></script>
二、Html結(jié)構(gòu)
<div class="sp-wrap">
<a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
<a href="images/2.jpg"><img src="images/2_tb.jpg" alt=""></a>
</div>
你還可以通過使用sp-loading class添加一個(gè)圖片加載時(shí)的loading指示器容器,這個(gè)容器會在圖片加載完成之后消失。
<div class="sp-loading"><img src="images/sp-loading.gif" alt="">
LOADING IMAGES</div>
<div class="sp-wrap">
<a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
<a href="images/2.jpg"><img src="images/2_tb.jpg" alt=""></a>
</div>
如果需要在頁面加載時(shí)顯示指定的商品縮略圖,而不是第一張縮略圖,可以在想要指定的圖片的超鏈接上指定sp-default class。
<div class="sp-wrap">
<a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
<a href="images/2.jpg" class="sp-default"><img src="images/2_tb.jpg" alt=""></a>
</div>
三、初始化插件
<script type="text/javascript">
$(window).load( function() {
$('.sp-wrap').smoothproducts();
});
</script>
KeyMob移動端廣告平臺為應(yīng)用開發(fā)者和廣告主提供應(yīng)用交叉推廣、手機(jī)廣告優(yōu)化等一站式移動營銷解決方案,使應(yīng)用開發(fā)者和廣告主獲得價(jià)值的最大化。
相關(guān)文章
html5實(shí)現(xiàn)完美兼容各大瀏覽器的播放器
這篇文章主要介紹了html5實(shí)現(xiàn)完美兼容各大瀏覽器的播放器,需要的朋友可以參考下2014-12-262013年五大主流瀏覽器 HTML5 與 CSS3 兼容性大比拼
這篇文章主要介紹了2013年五大主流瀏覽器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以參考下2014-11-18HTML5實(shí)現(xiàn)的粘瀏覽器小泥塊特效源碼
這款HTML5動畫非常可愛,動畫的主角是一款粘人的小泥塊,用鼠標(biāo)拖動泥塊,泥塊即可粘住瀏覽器,讓后一點(diǎn)點(diǎn)掉落下來。而完成這樣的HTML5動畫,我們只需一張圖片和一系列CSS32014-10-31- 本文主要為大家介紹了HTML5新增元素如何兼容舊瀏覽器的解決辦法,需要的朋友可以參考下2014-05-09
讓ie瀏覽器成為支持html5的瀏覽器的解決方法(使用html5shiv)
越來越多的站點(diǎn)開始使用HTML5標(biāo)簽。但是目前的情況是還有很多人在使用IE6,IE7,IE8。這里提供一種讓ie瀏覽器支持html5的方法,需要的朋友可以參考下2014-04-08讓你的HTML5&CSS3網(wǎng)站在微軟的瀏覽器中也能運(yùn)行
很多朋友都在想辦法想辦法兼容早期的IE瀏覽器,下面有三種方法能快捷輕松的讓你的HTML5&CSS3網(wǎng)站在微軟的主要瀏覽器中也能神奇的運(yùn)行2014-03-31- 讓IE(包括IE6)支持HTML5元素,需要在HTML頭部添加一個(gè)簡單的document.createElement聲明,具體祥看本文2014-03-12
在IE6/7/8下識別html5標(biāo)簽(讓老式瀏覽器識別html5)
html5添加了許多語義化的標(biāo)簽估計(jì)很多老式IE瀏覽器都不支持,在chrome等現(xiàn)代瀏覽器下面用這些標(biāo)簽固然可以,那么我在IE6/7/8下用這些標(biāo)簽會有什么效果了呢,下面與大家分享2013-06-28- 學(xué)習(xí)w3c是看到一個(gè)檢測您的瀏覽器是否支持 HTML5 視頻的方法,在這里與大家分享下,感興趣的各位可以參考下哈,希望可以幫助到你2013-03-28
html5中canvas學(xué)習(xí)筆記2-判斷瀏覽器是否支持canvas
判斷瀏覽器是否支持canvas,本人搜集整理了一些使用方法,感興趣的朋友可以了解下2013-01-06