layui图片放大功能

刚刚的项目里面要做一个图片放大功能，用的layui，直接用layer.open改造了一个，记录一下！

页面：

js:

$(".img_big").click(function(){
       var url = $(this).attr('title');
       $("#displayImg").attr("src", url);
   var height = $("#displayImg").height();
   var width = $("#displayImg").width();
   layer.open({
   type: 1,
   title: false,
   closeBtn: 0,//隐藏关闭按钮
   shade: [0.3, '#000'],//黑色背景（0.3代表颜色深度）
   shadeClose: true,//点击遮罩关闭大图
   area: [width + 'px', height + 'px'], //宽高
   resize:false,//不可拖拽缩放
   skin: 'myskin',//大图背景色定义类
   content: "<img alt=" + name + " title=" + name + " src=" + url + " height=500px; width=500px;" + "/>"
   });
   })

css:

.myskin{
background-color:transparent;//透明（可根据需求自己调整）
opacity: 0.3;//透明度
}

考虑到以后可能会有很多地方用到这个功能，为了偷懒，直接搞一个js文件好了，用的时候直接引用即可，包括css也一样，然后就简单了，复制粘贴，改一下图片路径，完成！

layui图片放大功能相关推荐

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图片放大功能（取巧）
先定义一个会话框里面隐藏一个div标签 <div id="dlgdiv" class="easyui-dialog"style="width: ...

layui图片放大功能

layui图片放大功能相关推荐

最新文章

热门文章