在一些電商網站和家居網站上我們會看到這樣的應用，一張圖片中顯示多種商品，點擊每個商品可以彈出對應商品的簡單介紹，包括價格等等，極大的提高了用戶體驗，今天我們通過實例給大家分享使用jQuery插件來實現這一效果

HTML

首先，我們加載jQuery庫和easypin插件。

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

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

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

接著，我們準備一張圖片，這是一張展示多個模特服裝鞋子包包內的電商圖片，注意我們給圖片一個easypin-id屬性，它用來標記當前圖片id，用來被后面插件調用。

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

我們還需要制作一個用于彈出顯示商品信息的隱藏層，使用屬性easypin-tpl來標記彈出層。標簽popover是彈出層元素，標簽marker是標注點元素。再配合CSS來讓彈出層有一個漂亮的外觀。

<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()兩個方法，我們使用easypinShow()來展示圖片標注效果，它有一個data選項，支持json格式，它定義標注點相關數據，包括坐標位置，商品名稱、描述和價格，這些數據可以是后臺統一生成。它還提供了很多其他選項和回調函數，請看下面的代碼。

$(document).ready(function(){

$('.pin').easypinShow({

data: '{"demo_image_1":{"0":{"name":"商品名稱","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()可以用來實現圖片標注效果，您可以在圖片上任意位置標注，然后再彈出層中填寫標注信息提交即可，支持拖動等等

一款簡單的jQuery圖片標注效果附源碼下載到此就給大家介紹完了，希望對大家有所幫助！