一款简洁的 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