一款简单的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 相关文章推荐
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
js实现下一页页码效果
Mar 07 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
Node 模块原理与用法详解
May 13 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 magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
常用简易JavaScript函数
2009/04/09 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
javascript实现下雨效果
2017/03/27 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
python定时执行指定函数的方法
2015/05/27 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
怎样声明子类
2013/07/02 面试题
如何手工释放资源
2013/12/15 面试题
保险经纪人求职信
2014/03/11 职场文书
公司授权委托书范本
2014/09/18 职场文书
运动会加油稿20字
2014/11/15 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
4种方法python批量修改替换列表中元素
2022/04/07 Python