一款简单的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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
关于javascript document.createDocumentFragment()
Apr 04 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
酷炫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函数代码
2010/04/22 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php字符串分割函数用法实例
2015/03/17 PHP
PHP实现递归无限级分类
2015/10/22 PHP
Display SQL Server Version Information
2007/06/21 Javascript
js程序中美元符号$是什么
2008/06/05 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
python实现从web抓取文档的方法
2014/09/26 Python
Python3读取zip文件信息的方法
2015/05/22 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
《生命的药方》教学反思
2014/04/08 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers