easyui图片放大功能（取巧）

先定义一个会话框里面隐藏一个div标签

<div id="dlgdiv" class="easyui-dialog"style="width: 650px; height: 550px; padding: 10px 20px" closed="true"buttons="#dlgdiv-buttons"><div id="divlarge"></div>
</div>

在图片字段中加一个onclick事件，以this.src方式传入图片地址

{field: 'pic',title: 'pic',align: 'center',width: '15%',formatter: function (value, row, index) {if (value != null) {return "<img onclick='myfunciton(this.src)' name='smallImg' src='" + value + "' alt='没有图片' width='120px' height='120px' />"}return "<div style='height: 120px'><h2  align='center' style='padding-top: 30px' />NO IMG</h2><div>"}

最后onclick事件中指向的myfunction方法将对话框即里面的图片展示出来

function myfunciton(e) {var large='<img width="596px" height="453px" src=' +e+ '></img>';$("#divlarge").html(large).animate({height:'30%',width:'30%'},1);$("#dlgdiv").dialog("open").dialog("setTitle", "图片展示");
}

效果图

easyui图片放大功能（取巧）相关推荐

jQuery插件Magnify放大镜实现javascript图片放大功能
jQuery插件Magnify放大镜实现javascript图片放大功能博客所有文章均属原创作品,如有转载,请注明作者:biuuu,来源:http://www.biuuu.com/?p=459 有时 ...
h5 - PhotoSwipe图片放大功能集成和使用
说明: PhotoSwipe图片放大功能的简单demo. 重要代码: 1.html中引入js和css文件,和一段固定的代码 <!-- PhotoSwipe styles --& ...
angular仿微信图片放大功能
近期要写一个移动端两个手指图片放大的功能,由于我们项目是angular框架.一时间没有思路只能百度找一些angualr的文档,果然一下就出来了,而且非常实用.我用根据自己的需求改动了一下,最后完成的效 ...
winform窗体上图片放大功能
今天遇到点击图片,所点部位实现放大的功能,网上也有很多资料,记录下自己写的. 窗体上放置两个pictureBox控件,第一个添加image,属性SizeMode设置为StretchImage.可以开始 ...
使用react完成图片放大功能(淘宝放大镜）
文章目录效果引用组件实现原理 CSS部分 React JS部分参考文章 Github源码效果引用组件 import React from 'react'; import ImageMagn ...
小程序富文本图片放大功能
// 富文本图片放大 function richImg(txt) {//txt 指的是接口返回的富文本// 主要代码let imgarr = [];let regex = new RegExp(/&l ...
css图片放大功能，且不溢出包裹盒子
要实现图片在不溢出包裹的盒子内放大的效果,可以使用CSS3中的transform属性.具体方法如下: 将需要放大的图片放入一个容器中: <div class="img-containe ...
手机微信浏览器调用图片放大功能
1. 引用微信的JS <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixi ...
Cocos2dx 3.2 之实现精灵图片放大功能
原文地址 http://blog.csdn.net/jhonlight/article/details/38408351 今天一个群友问我: 我Scene里放置一个Layer,Layer盛放一张图片, ...

easyui图片放大功能（取巧）

效果图

easyui图片放大功能（取巧）相关推荐

最新文章

热门文章