一款简洁的jQuery图片标注效果附源码下载-.docx
版权申诉
24 浏览量
2022-11-04
18:16:12
上传
评论
收藏 11KB DOCX 举报
一款简洁的 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
资源评论
