怎么用jQuery插件实现图片标注效果

发布时间:2021-08-10 09:47:53 作者:chen
来源:亿速云 阅读:210

这篇文章主要介绍“怎么用jQuery插件实现图片标注效果”,在日常操作中,相信很多人在怎么用jQuery插件实现图片标注效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用jQuery插件实现图片标注效果”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

在一些电商网站和家居网站上我们会看到这样的应用,一张图片中显示多种商品,点击每个商品可以弹出对应商品的简单介绍,包括价格等等,极大的提高了用户体验,今天我们通过实例给大家分享使用jQuery插件来实现这一效果。

HTML

首先,我们加载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()可以用来实现图片标注效果,您可以在图片上任意位置标注,然后再弹出层中填写标注信息提交即可,支持拖动等等,更多相关信息可以查看easypin项目网站:https://github.com/atayahmet/jquery.easypin

到此,关于“怎么用jQuery插件实现图片标注效果”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. 常用实用图片轮播效果jquery插件
  2. Python tkinter实现图片标注功能(完整代码)

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery

上一篇:vue cli 3.0如何使用

下一篇:jQuery+HTML5实现声音提示效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》