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


Posted in Javascript onMarch 22, 2016

为了提高用户体验度,在一些电商网站和家居网站上我们会看到,一张图片中显示多种商品,点击每个商品可以弹出对应商品的简单介绍,包括价格等等,设计非常的人性化,今天我们通过实例给大家分享使用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图片标注效果附源码下载到此就给大家介绍完了,希望对大家有所帮助!

Javascript 相关文章推荐
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
浅谈document.write()输出样式
May 07 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
酷炫jQuery全屏3D焦点图动画效果
Mar 22 #Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 #Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 #Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 #Javascript
Node.js文件操作方法汇总
Mar 22 #Javascript
浅谈Sticky组件的改进实现
Mar 22 #Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 #Javascript
You might like
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
用js实现放大镜效果
2020/10/28 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
详解Python中heapq模块的用法
2016/06/28 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
python 常用的基础函数
2018/07/10 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
.NET面试10题
2014/02/24 面试题
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
八年级音乐教学反思
2014/01/09 职场文书
村抢险救灾方案
2014/05/09 职场文书
春节超市活动方案
2014/08/14 职场文书
五心教育心得体会
2014/09/04 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
入党自荐书范文
2015/03/05 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
浅谈JavaScript作用域
2021/12/06 Javascript