這篇文章主要介紹“怎么用jQuery插件實現(xiàn)圖片標注效果”，在日常操作中，相信很多人在怎么用jQuery插件實現(xiàn)圖片標注效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用jQuery插件實現(xiàn)圖片標注效果”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
在一些電商網(wǎng)站和家居網(wǎng)站上我們會看到這樣的應用，一張圖片中顯示多種商品，點擊每個商品可以彈出對應商品的簡單介紹，包括價格等等，極大的提高了用戶體驗，今天我們通過實例給大家分享使用jQuery插件來實現(xiàn)這一效果。
首先，我們加載jQuery庫和easypin插件。
$(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()可以用來實現(xiàn)圖片標注效果，您可以在圖片上任意位置標注，然后再彈出層中填寫標注信息提交即可，支持拖動等等，更多相關信息可以查看easypin項目網(wǎng)站：https://github.com/atayahmet/jquery.easypin
到此，關于“怎么用jQuery插件實現(xiàn)圖片標注效果”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
當前文章：怎么用jQuery插件實現(xiàn)圖片標注效果-創(chuàng)新互聯(lián)
URL地址：http://weahome.cn/article/dedejs.html
重慶分公司
重慶分公司
