快捷導(dǎo)航

一款簡(jiǎn)單的jQuery圖片標(biāo)注效果附源碼下載

更新時(shí)間：2016年03月22日 11:11:37 作者：月光光

在一些電商網(wǎng)站和家居網(wǎng)站上我們會(huì)看到這樣的應(yīng)用，一張圖片中顯示多種商品，點(diǎn)擊每個(gè)商品可以彈出對(duì)應(yīng)商品的簡(jiǎn)單介紹，包括價(jià)格等等，極大的提高了用戶(hù)體驗(yàn)，今天我們通過(guò)實(shí)例給大家分享使用jQuery插件來(lái)實(shí)現(xiàn)這一效果

為了提高用戶(hù)體驗(yàn)度，在一些電商網(wǎng)站和家居網(wǎng)站上我們會(huì)看到，一張圖片中顯示多種商品，點(diǎn)擊每個(gè)商品可以彈出對(duì)應(yīng)商品的簡(jiǎn)單介紹，包括價(jià)格等等，設(shè)計(jì)非常的人性化，今天我們通過(guò)實(shí)例給大家分享使用jQuery插件來(lái)實(shí)現(xiàn)這一效果。

先給大家展示下效果圖：

效果演示源碼下載

HTML

首先，我們加載jQuery庫(kù)和easypin插件。

<script src="jquery.min.js"></script> 
<script src="jquery.easing.min.js"></script> 
<script src="jquery.easypin.min.js"></script>

接著，我們準(zhǔn)備一張圖片，這是一張展示多個(gè)模特服裝鞋子包包內(nèi)的電商圖片，注意我們給圖片一個(gè)easypin-id屬性，它用來(lái)標(biāo)記當(dāng)前圖片id，用來(lái)被后面插件調(diào)用。

<img src="fashion.jpg" class="pin" width="900" easypin-id="demo_image_1" />

我們還需要制作一個(gè)用于彈出顯示商品信息的隱藏層，使用屬性easypin-tpl來(lái)標(biāo)記彈出層。標(biāo)簽popover是彈出層元素，標(biāo)簽marker是標(biāo)注點(diǎn)元素。再配合CSS來(lái)讓彈出層有一個(gè)漂亮的外觀(guān)。

<div style="display:none;" easypin-tpl> 
<popover> 
<div class="exPopoverContainer"> 
<div class="popBg borderRadius"></div> 
<div class="popBody"> 
<div class="arrow-down" style="top: 170px;left: 13px;"></div> 
<h1>{[name]}</h1> 
<div class="popHeadLine"></div> 
<div class="popContentLeft"> 
{[description]} 
<br /> 
<br /> 
<a href="#">Buy</a> 
<a href="#">More info</a> 
</div> 
<div class="popContentRight">{[price]}</div> 
</div> 
</div> 
</popover> 
<marker> 
<div class="marker2 element-animation"> 
</div> 
</marker> 
</div>

jQuery

插件提供了easypin()和easypinShow()兩個(gè)方法，我們使用easypinShow()來(lái)展示圖片標(biāo)注效果，它有一個(gè)data選項(xiàng)，支持json格式，它定義標(biāo)注點(diǎn)相關(guān)數(shù)據(jù)，包括坐標(biāo)位置，商品名稱(chēng)、描述和價(jià)格，這些數(shù)據(jù)可以是后臺(tái)統(tǒng)一生成。它還提供了很多其他選項(xiàng)和回調(diào)函數(shù)，請(qǐng)看下面的代碼。

$(document).ready(function(){ 
$('.pin').easypinShow({ 
data: '{"demo_image_1":{"0":{"name":"商品名稱(chēng)","description":"商品描述信息. ","price":"$67","coords":{"lat":"800","long":"228"}},"1":{"name":"Pierre Cardin","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. ","price":"$98","coords":{"lat":"597","long":"357"}},"2":{"name":"Pierre Cardin","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ","price":"$100","coords":{"lat":"241","long":"352"}},"canvas":{"src":"fashion.jpg","width":"1000","height":"625"}}}', 
responsive: false, 
variables: { 
firstname: function(canvas_id, pin_id, data) { 
//console.log(canvas_id, pin_id, data); 
return data; 
}, 
surname: function(canvas_id, pin_id, data) { 
//console.log(canvas_id, pin_id, data); 
return data; 
} 
}, 
popover: { 
show: false, 
animate: true 
}, 
each: function(index, data) { 
return data; 
}, 
error: function(e) { 
console.log(e); 
}, 
success: function() { 
console.log('ok'); 
} 
}); 
});

easypin()可以用來(lái)實(shí)現(xiàn)圖片標(biāo)注效果，您可以在圖片上任意位置標(biāo)注，然后再?gòu)棾鰧又刑顚?xiě)標(biāo)注信息提交即可，支持拖動(dòng)等等

一款簡(jiǎn)單的jQuery圖片標(biāo)注效果附源碼下載到此就給大家介紹完了，希望對(duì)大家有所幫助！

您可能感興趣的文章: