一款简单的jQuery图片标注效果附源码下载

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

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

<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> 

$(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'); 
} 
}); 
});