Html5插件教程之添加瀏覽器放大鏡效果的商品櫥窗
發(fā)布時(shí)間：2016-01-07 14:20:15 作者：佚名 
我要評(píng)論
我要評(píng)論KeyMob移動(dòng)端廣告平臺(tái)為應(yīng)用開發(fā)者和廣告主提供應(yīng)用交叉推廣、手機(jī)廣告優(yōu)化等一站式移動(dòng)營(yíng)銷解決方案，使應(yīng)用開發(fā)者和廣告主獲得價(jià)值的最大化
KeyMob移動(dòng)端廣告平臺(tái)為應(yīng)用開發(fā)者和廣告主提供應(yīng)用交叉推廣、手機(jī)廣告優(yōu)化等一站式移動(dòng)營(yíng)銷解決方案，使應(yīng)用開發(fā)者和廣告主獲得價(jià)值的最大化。
一、使用方法
復(fù)制代碼
代碼如下:<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)
復(fù)制代碼
代碼如下:<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>
你還可以通過(guò)使用sp-loading class添加一個(gè)圖片加載時(shí)的loading指示器容器，這個(gè)容器會(huì)在圖片加載完成之后消失。
復(fù)制代碼
代碼如下:<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>
如果需要在頁(yè)面加載時(shí)顯示指定的商品縮略圖，而不是第一張縮略圖，可以在想要指定的圖片的超鏈接上指定sp-default class。
復(fù)制代碼
代碼如下:<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>
三、初始化插件
復(fù)制代碼
代碼如下:<script type="text/javascript">
$(window).load( function() {
$('.sp-wrap').smoothproducts();
});
</script>
KeyMob移動(dòng)端廣告平臺(tái)為應(yīng)用開發(fā)者和廣告主提供應(yīng)用交叉推廣、手機(jī)廣告優(yōu)化等一站式移動(dòng)營(yíng)銷解決方案，使應(yīng)用開發(fā)者和廣告主獲得價(jià)值的最大化。
相關(guān)文章
html5實(shí)現(xiàn)完美兼容各大瀏覽器的播放器
這篇文章主要介紹了html5實(shí)現(xiàn)完美兼容各大瀏覽器的播放器,需要的朋友可以參考下2014-12-262013年五大主流瀏覽器 HTML5 與 CSS3 兼容性大比拼
這篇文章主要介紹了2013年五大主流瀏覽器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以參考下2014-11-18
HTML5實(shí)現(xiàn)的粘瀏覽器小泥塊特效源碼
這款HTML5動(dòng)畫非常可愛，動(dòng)畫的主角是一款粘人的小泥塊，用鼠標(biāo)拖動(dòng)泥塊，泥塊即可粘住瀏覽器，讓后一點(diǎn)點(diǎn)掉落下來(lái)。而完成這樣的HTML5動(dòng)畫，我們只需一張圖片和一系列CSS32014-10-31- 本文主要為大家介紹了HTML5新增元素如何兼容舊瀏覽器的解決辦法，需要的朋友可以參考下2014-05-09
讓ie瀏覽器成為支持html5的瀏覽器的解決方法(使用html5shiv)
越來(lái)越多的站點(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è)簡(jiǎn)單的document.createElement聲明，具體祥看本文2014-03-12
在IE6/7/8下識(shí)別html5標(biāo)簽(讓老式瀏覽器識(shí)別html5)
html5添加了許多語(yǔ)義化的標(biāo)簽估計(jì)很多老式IE瀏覽器都不支持，在chrome等現(xiàn)代瀏覽器下面用這些標(biāo)簽固然可以，那么我在IE6/7/8下用這些標(biāo)簽會(huì)有什么效果了呢，下面與大家分享2013-06-28- 學(xué)習(xí)w3c是看到一個(gè)檢測(cè)您的瀏覽器是否支持 HTML5 視頻的方法，在這里與大家分享下，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-28
html5中canvas學(xué)習(xí)筆記2-判斷瀏覽器是否支持canvas
判斷瀏覽器是否支持canvas,本人搜集整理了一些使用方法，感興趣的朋友可以了解下2013-01-06
