一款簡單的jQuery圖片標註效果附源碼下載_jquery

為了提高使用者體驗度，在一些電商網站和家居網站上我們會看到，一張圖片中顯示多種商品，點擊每個商品可以彈出對應商品的簡單介紹，包括價格等等，設計非常的人性化，今天我們通過執行個體給大家分享使用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圖片標註效果附源碼下載到此就給大家介紹完了，希望對大家有所協助！