【layui】一个简单的layui点击图片进行预览的方法

 1 function previewImg(obj) {
 2             var img = new Image();
 3             img.src = obj.src;
 4             alert(img.src);
 5             var imgHtml = "<img src=‘" + obj.src + "‘ />";
 6             //捕获页
 7             layer.open({
 8                 type: 1,
 9                 shade: false,
10                 title: false, //不显示标题
11                 //area:[‘600px‘,‘500px‘],
12                 area: [600+‘px‘, 480+‘px‘],
13                 content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
14                 cancel: function () {
15                     //layer.msg(‘捕获就是从页面已经存在的元素上,包裹layer的结构‘, { time: 5000, icon: 6 });
16                 }
17             });
18         }

function previewImg(obj) {var img = new Image();      img.src = obj.src;    alert(img.src);    var imgHtml = "<img src=‘" + obj.src + "‘ />";      //捕获页      layer.open({          type: 1,          shade: false,          title: false, //不显示标题          //area:[‘600px‘,‘500px‘],          area: [600+‘px‘, 480+‘px‘],          content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响          cancel: function () {              //layer.msg(‘捕获就是从页面已经存在的元素上,包裹layer的结构‘, { time: 5000, icon: 6 });          }      }); }

原文地址:https://www.cnblogs.com/NoctisYang/p/9036425.html

时间: 2024-12-09 19:11:14

【layui】一个简单的layui点击图片进行预览的方法的相关文章

微信小程序点击图片放大预览

微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{images}}"> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage

巧用weui.gallery(),点击图片后预览图片

要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是它的demo:   https://weui.io/weui.js/ 要先给图片创建一个节点: var imgDom = $("<img class='weui-jiaj-img' />"); 因为接口中取到的图片会是很多,因此,在循环图片数据的时候,要给每个图片添加一个动态的

js点击图片放大预览

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">#divid {position:fixed;z-index:2000;left:50%;top:50%;transform:translate(-50%,-50%);}#imgid {width:1000px;height:500px;}</style>

iOS HTML图片本地预览

1.引言 相信用过苹果手机的童鞋,会发现很多新闻类的应用,都可以实现HTML图片本地预览,那么这是如何实现的呢?本文将深入阐述其中的原理. 关于此功能,我还实现了一个DEMO,大家可以点击此访问更详细内容 2.原理 接触过web开发的人,就了解与html元素交互都是通过javascript进行的,比如点击.滑动等,比如点击标签的响应代码如下 var img = document.getElementById('test'); img.onclick = function() { do some

android GridView显示相同尺寸图片以及预览功能

项目描述: GridView加载图片,在程序中控制各个图片尺寸一致,点击图片进行预览,可以滑动切换查看不同的界面,可以手势控制图片缩放,效果图如下: 1.GridView控制每个控件大小一致 GridView中的控件大小在程序中控制,思路就是获取屏幕宽高,减去控件之间的空隙,除以每一行控件的个数,就是控件的宽,可以将控件的高设置与宽一致. 首先获取屏幕宽高 public static int screenWidth;//屏幕宽度 WindowManager windowManager = get

jQuery Lightbox图片放大预览

简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://hovertree.com/texiao/jqimg/6/ 效果图如下: 源码下载:http://hovertree.com/h/bjaf/hdhgnftp.htm HTML文件代码: <!DOCTYPE html> <html lang="zh"> <head

cropper.js实现图片裁剪预览并转换为base64发送至服务端。

一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时记得引入cropper.css 3. 此处后端使用的nodejs,不过不懂node的影响也不大. 二 . 图片裁剪并预览 1.首先利用cropper完成图片裁剪并预览: <input type="file" name="" id="imgBtn"

Java实现图片裁剪预览功能

Java实现图片裁剪预览功能 在项目中,我们需要做些类似头像上传,图片裁剪的功能,ok看下面文章! 需要插件:jQuery Jcrop 后端代码: package org.csg.upload; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import 

单张图片在线预览+图片压缩

该方法未测试浏览器兼容性,仅在谷歌上进行过测试. 图片在线预览:一般思路是通过获取file上的绝对路径并将路径赋值给src实现在线预览功能,但现实中的浏览器,尤其是高版本浏览器由于用户安全性考虑,不会让开发者通过file获取到绝对路径,因此使用H5中的画板功能,将图片进行重绘后,得到base64编码的dataURL,再将这个地址赋值给src实现在线预览功能. 图片压缩原理:将大图根据预定尺寸进行尺寸修改. <!DOCTYPE html> <html lang="en"