一款簡(jiǎn)單的jQuery圖片標(biāo)注效果附源碼下載
為了提高用戶體驗(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è)漂亮的外觀。
<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)位置,商品名稱、描述和價(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":"商品名稱","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)棾鰧又刑顚憳?biāo)注信息提交即可,支持拖動(dòng)等等
一款簡(jiǎn)單的jQuery圖片標(biāo)注效果附源碼下載到此就給大家介紹完了,希望對(duì)大家有所幫助!
- python實(shí)現(xiàn)簡(jiǎn)單圖片物體標(biāo)注工具
- vue如何使用js對(duì)圖片進(jìn)行點(diǎn)擊標(biāo)注圓點(diǎn)并記錄它的坐標(biāo)
- 一款基于jQuery的圖片場(chǎng)景標(biāo)注提示彈窗特效
- Python tkinter實(shí)現(xiàn)圖片標(biāo)注功能(完整代碼)
- vue下如何利用canvas實(shí)現(xiàn)在線圖片標(biāo)注
- jquery.picsign圖片標(biāo)注組件實(shí)例詳解
- 在React中用canvas對(duì)圖片標(biāo)注的實(shí)現(xiàn)
- 微信小程序給圖片做動(dòng)態(tài)標(biāo)注的實(shí)例分享
相關(guān)文章
jquery插件制作 表單驗(yàn)證實(shí)現(xiàn)代碼
今天的內(nèi)容是關(guān)于表單驗(yàn)證插件的制作。表單驗(yàn)證控件實(shí)現(xiàn)的主要功能是,當(dāng)表單提交的時(shí)候檢查必填項(xiàng)是否正確填寫,同時(shí)根據(jù)需要驗(yàn)證輸入信息是否符合規(guī)范2012-08-08jQuery EasyUI API 中文文檔 - Panel面板
jQuery EasyUI API 中文文檔 - Panel面板,使用jQuery EasyUI的朋友可以參考下。2011-09-09jQuery UI結(jié)合Ajax創(chuàng)建可定制的Web界面
這篇文章主要為大家詳細(xì)介紹了jQuery UI結(jié)合Ajax創(chuàng)建可定制的Web界面,如何利用Ajax和jQuery UI創(chuàng)建具有各種定制功能的高度可定制的UI,感興趣的小伙伴們可以參考一下2016-06-06JQuery animate動(dòng)畫應(yīng)用示例
這篇文章主要介紹了JQuery animate動(dòng)畫應(yīng)用,結(jié)合具體實(shí)例形式分析了jQuery使用animate動(dòng)畫實(shí)現(xiàn)選項(xiàng)卡及樣式動(dòng)態(tài)變化相關(guān)操作技巧,需要的朋友可以參考下2019-05-05jquery實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)倒計(jì)時(shí)效果,根據(jù)設(shè)計(jì)一個(gè)游戲引出的倒計(jì)時(shí)功能,需要的朋友可以參考下2015-12-12基于jquery & json的省市區(qū)聯(lián)動(dòng)代碼
基于jquery & json的省市區(qū)聯(lián)動(dòng)代碼,需要的朋友可以參考下2012-06-06jquery使用ajax實(shí)現(xiàn)微信自動(dòng)回復(fù)插件
這篇文章主要介紹了jquery使用ajax實(shí)現(xiàn)微信自動(dòng)回復(fù)插件,需要的朋友可以參考下2014-04-04