一款简单的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 相关文章推荐
日期 时间js控件
May 07 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 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常量的详解
2013/06/09 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
jQuery自定义多选下拉框效果
2017/06/19 jQuery
vue登录注册及token验证实现代码
2017/12/14 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
python构建自定义回调函数详解
2017/06/20 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Python Selenium参数配置方法解析
2020/01/19 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
"火柴棍式"程序员面试题
2014/03/16 面试题
师范生求职自荐信
2014/06/14 职场文书
赔偿协议书范本
2014/09/12 职场文书
党员对照检查材料
2014/09/22 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
2014年团工作总结
2014/11/27 职场文书
租车协议书
2015/01/27 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
golang import自定义包方式
2021/04/29 Golang
Nginx配置https的实现
2021/11/27 Servers