一款简单的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>
<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()两个方法，我们使用easypinShow()来展示图片标注效果，它有一个data选项，支持json格式，它定义标注点相关数据，包括坐标位置，商品名称、描述和价格，这些数据可以是后台统一生成。它还提供了很多其他选项和回调函数，请看下面的代码。

$(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()可以用来实现图片标注效果，您可以在图片上任意位置标注，然后再弹出层中填写标注信息提交即可，支持拖动等等

一款简单的jQuery图片标注效果附源码下载到此就给大家介绍完了，希望对大家有所帮助！

赞 (0)

相关推荐

  • jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)

    jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)

    demo01.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

  • 一款基于jQuery的图片场景标注提示弹窗特效

    一款基于jQuery的图片场景标注提示弹窗特效

    今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.效果非常不错.效果如下: 实现的过程. 这款实例要引用jquery和jquery ui库,还有一个实现的main.js库.需上的朋友可以点击上现的下载按钮下载来看看. html代码部分: 复制代码 代码如下: <div class="container"

  • 一款简单的jQuery图片标注效果附源码下载

    一款简单的jQuery图片标注效果附源码下载

    为了提高用户体验度,在一些电商网站和家居网站上我们会看到,一张图片中显示多种商品,点击每个商品可以弹出对应商品的简单介绍,包括价格等等,设计非常的人性化,今天我们通过实例给大家分享使用jQuery插件来实现这一效果. 先给大家展示下效果图: 效果演示          源码下载 HTML 首先,我们加载jQuery库和easypin插件. <script src="jquery.min.js"></script> <script src="jqu

  • jQuery实现鼠标滚动图片延迟加载效果附源码下载

    jQuery实现鼠标滚动图片延迟加载效果附源码下载

    这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 请用鼠标或者键盘方向键使页面向下滚动,注意图片的变化.本特效没有使用专门的图片延迟加载插件,只需要一小段jQuery代码就实现了图片延迟加载,使用非常方便.在本文后面附有源码下载. 效果展示     源码下载 用到的加载中的图片: 代码如下: <!DOCTYPE html> <html> <head> <meta charset

  • 基于Jquery制作图片文字排版预览效果附源码下载

    基于Jquery制作图片文字排版预览效果附源码下载

    基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦. 效果演示    源码下载 html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscree

  • Jquery插件之Fancybox丰富的弹出层效果附源码下载

    Jquery插件之Fancybox丰富的弹出层效果附源码下载

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片.图片集.Ajax数据,还能加载SWF影片,iframe页面等等. 效果演示    源码下载 fancybox 特点: 可以支持图片.html 文本.flash 动画.iframe 以及 ajax 的支持: 可以自定义播放器的 css 样式: 可以以组的形式进行播放: 如果将鼠标滚动插件(mouse

  • jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣. 效果展示       源码下载 使用方法 使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件. <link rel="stylesheet" href="css/imagedrawer.css"

  • jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

    jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

    弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍如何使用jQuery+Ajax+PHP弹出层异步登录的应用. 效果展示        源码下载 HTML 由于本例UI部分使用了Bootstrap,以及使用jQuery插件,因此需要事先载入相关文件,推荐大家使用相关的CDN资源. <link rel="stylesheet" hre

  • 基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    内容滑动切换应用非常广,常见的有幻灯片焦点图.画廊切换等.随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程. 先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示: 效果展示      源码下载 本次教程分三个部分: 1.使用jQuery开发基本的内容滑动切换效果, 2.支持移动端触控自适应的内容滑动切换效果, 3.封装内容滑动切换效果jQuery插件. 本文讲解第一部分,

  • jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

    jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

    使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示         源码下载 html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><

  • jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载（二）

    jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载（二）

    今天我们继续内容滑动切换效果的第二部分讲解.如今我们的web开发都要适应移动设备,就是说我们的web页面要在移动设备如手机端也能正常访问,所以我将第一部分的基本切换效果做了加强,增加了响应式和触控滑动效果. 效果展示    源码下载 本文是hwSlider-内容滑动切换效果的第二部分,演示DEMO都是基于第一部分内容的基础上的,所以,如果您还没阅读过第一部分的话,请先移步参阅:基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一) 响应式 什么是响应式设计,这里我就不描述了.

  • jQuery日期范围选择器附源码下载

    jQuery日期范围选择器附源码下载

    jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件.整个日期选择器插件使用CSS来渲染样式,可以非常容易的使用CSS来定制皮肤.而且浏览器兼容性非常好,支持多种时间格式. 查看演示             下载源码 准备 使用该日期选择器插件需要 jQuery 1.3.2+和Moment 2.2.0+的支持. <link rel="stylesheet" href="css/daterangepicker.cs

随机推荐