点击图片缩略图放大展示效果的实现
点击放大的效果
三个顺序图片可一一展示
实现方法:
1、引入第三方的js文件和css样式文件
<!-- 放大图片 -->
<link rel="stylesheet" href="<%=path%>/js/bigimage/css/bigimage.css" type="text/css" />
<script type="text/javascript" src="<%=path%>/js/bigimage/js/content_zoom.js"></script>
<!-- 放大图片 -->
2、easyUI加载数据的js方法中处理针对图片的展示
{field : 'row.img_path',title : '相关截图',width : 50,align : 'center',formatter:function(value,row,index){if(row.img_path!=null&&row.img_path!=''){var img = row.img_path.split(",");var html = "";var bigH = "";html += "<div class='small_pic'>";$(img).each(function(i){html += "<a href='#pic_"+row.id+"_"+i+"'>";html += "<img src='<%=uploadPath%>upload/correction/"+img[i]+"' width:50 height=50>";html += "</a>";bigH += "<div id='pic_"+row.id+"_"+i+"' style='display:none;'><img style='max-width:92%;max-height:720px; width:320px;' src='<%=uploadPath%>upload/correction/"+img[i]+"'/></div>";});html += "</div>";html += bigH;return html;}}
},
该方法中img标签中的uploadPath是设定的服务器地址
String uploadPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+"/";
从row当中获取的img_path可能存在多个图片,以“,”分隔,分别取出img中各个图片进行处理,<a>标签中是缩略图原型,在bigH则是放大后的图片,放大后的图片默认是隐藏的;
在此处处理完成后,需要用到第三方插件的地方在,easyUI调用loadTable完成后,对图片添加操作的
onLoadSuccess:function(data){
$('div.small_pic a').fancyZoom({scaleImg: true, closeOnClick: true});
}
此处对缩略图的<a>标签做处理,点击放大,再次点击恢复。
点击图片缩略图放大展示效果的实现相关推荐
- js相册图片抖动放大展示效果
2019独角兽企业重金招聘Python工程师标准>>> var xm; var ym;/* ==== onmousemove event ==== */ document.onmou ...
- Word文档中实现:点击图片双击放大
Word文档中实现:点击图片双击放大 跌娣 2020-03-04 16:59:09 7895 已收藏 2 分类专栏: 其他 版权 忍不住来转载下文章,功能太好用了: 文章来源:脚本之家 文章网址: ...
- 移动端和PC端都兼容的图片滑动切换展示效果—PhotoSwipe
介绍一款兼容移动端和PC端的图片滑动切换展示效果-PhotoSwipe,PhotoSwipe是一款可以在移动触控设备上和PC桌面上完美运行的免费开源的图像展示l类独立的Javascript库,它基于H ...
- 仿淘宝商品放大展示效果制作(放大镜效果)
如果您觉得这篇文章有用,欢迎点赞收藏或有什么建议请在评论区留言,我看到后会第一时间回复的,谢谢! (分享时刻) mac上取色比较好用的小工具:啜色: 好用的截屏小工具:Snipaste (常用的一个功 ...
- jquery点击图片进行放大缩小
需求:点击图片进行放大,再点击缩小,进行轮回操作. 分析:可以用jquery的toggle事件 HTML中图片显示部分: <img src="" id="befor ...
- jquery 实现点击图片居住放大缩小
jquery 实现点击图片居住放大缩小 该功能是基于jquery实现的,所以 第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调 ...
- js点击图片进行放大
最简单的一种方式就是在图片的外层包上a便签,当点击的时候,相当于是跳转了这个图片路径. <a target="_Blank" href = "'+res.tp1+' ...
- CSS+JS自动循环滚动的多图片幻灯切换展示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- h5点击图片自动放大_关于微信上网页图片点击全屏放大效果
实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. function arrayToJson ...
最新文章
- typescript调用javascript URI.js
- 用python实现视频换脸_超简单使用Python换脸实例
- 如何用c语言ics文件,大一下学ics,书里在linux上用C编程,刚安系统老师就留了几个作业...
- asp.net ajax 弹不出alert对话框的解决办法
- 如何用word帮别人改文章呢?
- Spring Session 的两种刷新模式-RedisFlushMode
- unity随笔(1)-材质、对象
- SpringBoot 中配置加载优先级
- [css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样
- Restful Service 中 DateTime 在 url 中传递
- Django创建mysql数据库常用字段及参数
- batchplot插件用法_Batchplot怎么安装及使用?Batchplot的安装方法及使用方法介绍
- poj 1655 Balancing Act(求树的重心)
- 递归java程序_JAVA编程基础之递归结构
- 任务四十七:王牌特工 准备工作(二)
- Android WebView中那些不得不解决的坑~~
- html 拖拽图片验证,JavaScript实现拖动滑块拼图验证功能(html5、canvas)
- ankhsvn 使用_AnkhSVN:在Visual Studio中使用Subversion
- AirTest进行自动化测试
- Java串口编程控制硬件
热门文章
- Offer帮 纽约Quant求职
- [论文总结]:faster cnns with direct sparse convolutions and guided pruning 直接稀疏卷积和引导剪枝
- 南大通用GBase 8c斩获鲲鹏应用创新大赛2022全国总决赛金奖
- 数据中台开源解决方案(一)
- 将实验数据用matlab连成平滑的曲线图
- python机器人编程与操作_机器人Python极客编程入门与实战 PDF 完整目录版
- 语音识别公司排名YQ5969智能语音识别模块的快速崛起
- 生活陪伴、健康监测、紧急呼叫 ,深兰科技康养服务机器人成智慧养老新标配
- 【腾讯开放平台】Android、IOS实现指定QQ临时会话功能
- win10 裝在NET Framework 3.5(包括.NET 2.0和3.0)