html 图片预览

最新推荐文章于 2022-06-01 13:33:28 发布
最新推荐文章于 2022-06-01 13:33:28 发布
阅读量7.3k 收藏 9
点赞数 2
分类专栏： Html 文章标签： 图片预览
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gjcandxyx/article/details/83059196
版权

html代码：

<img onclick="prewImg(this)"  width="100px" height="100px" alt="" src="https://csdnimg.cn/feed/20181014/b3d3f881b3822fb281691b191a029631.jpg">
<div class="back" onclick="canclePrew()">
        <div class="center">
            <img alt="" src="" width="100%" height="100%" id="prewImg">
        </div>
</div>

css：

.back {
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1000;
	filter: alpha(opacity = 70);
	text-align: center;
}

.center {
	width: 80%;
	margin: 5% auto;
	z-index: 1001;
	height: 80%;
	width: 80%;
	margin: 5% auto;
}

js:

function prewImg(imgEle){
	$(".back").css("display","block");
	$("#prewImg").attr("src",$(imgEle).attr("src"));
}
function canclePrew(){
	$(".back").css("display","none");
	$("#prewImg").attr("src","")
}

完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片预览</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"
	charset="utf-8"></script>
<script type="text/javascript">
function prewImg(imgEle){
	$(".back").css("display","block");
	$("#prewImg").attr("src",$(imgEle).attr("src"));
}
function canclePrew(){
	$(".back").css("display","none");
	$("#prewImg").attr("src","")
}
	function canclePrew(){
		$(".back").css("display","none");
		$("#prewImg").attr("src","")
	}
</script>
<style>
.back {
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1000;
	filter: alpha(opacity = 70);
	text-align: center;
}

.center {
	width: 80%;
	margin: 5% auto;
	z-index: 1001;
	height: 80%;
	width: 80%;
	margin: 5% auto;
}
</style>
</head>
<body>
	<img onclick="prewImg(this)"  width="100px" height="100px" alt=""         src="https://csdnimg.cn/feed/20181014/b3d3f881b3822fb281691b191a029631.jpg">
<div class="back" onclick="canclePrew()">
        <div class="center">
            <img alt="" src="" width="100%" height="100%" id="prewImg">
        </div>
</div>
</body>
</html>

 

gjcandxyx
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自动弹图片html,HTML图片预览弹出层实现
weixin_33132819的博客
05-31 2426
HTML CSS Jq实现的图片点击预览功能，在预览时也可以点击切换图片。右边为预览图片的名称以及说明。CSS#ImageMain{width:630px;height:500px;margin:0auto;margin-top:100px;}#ImageMain>img{width:200px;height:200px;cursor:pointer;float:left;mar...
html5 实现图片预览
2401_84092694的博客
05-05 799
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
html-实现图片的预览功能
cnkeysky的博客
02-02 5484
html 实现图片的预览功能
html 删除预览图片,如何移除图片上传后预览中的删除按钮
weixin_39910963的博客
06-16 977
在FastAdmin中，当我们启用了图片上传预览时，在预览区域会自动生成预览图和删除按钮，如下图：如果我们想上移除掉这里的删除按钮，则需要启用自定义预览模板的功能。首先我们找到视图中我们的预览容器，比如：k+wPcUwcB81l1oaPOB66Bw==我们给ul添加一个属性data-template，如下：GYrCXHSfjXiQ5JcrEECFYg==这里的customtpl就是我们的模板ID，...
js实现html预览,JS实现图片预览的两种方式
weixin_30878135的博客
06-25 2125
考虑到用户体验， 网页的图片上传数据库前，先预览是很有必要的一个步骤，第一可以给用户带来安全感，第二防止图片文件有问题而提交到数据库，占用存储资源。那么要实现预览有两种方式：一种是用window.URL.createObjectURl方法对选择的图片数据(可以勉强理解为input的value)生成一个blob对象路径，第二种是用获取 FileReader读取器。那么无论那种方法，首先都得得到文件数...
html 预览图片代码
z872288703的博客
04-19 3989
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> <scripttype="text/javascript"src="http://libs...
Html5图片预览
qq_16239775的博客
03-02 2743
在以前，如果要实现图片预览会怎么做呢，因为为了安全的原因，web端的js是不能读取文件的本地真实路径的，那么只能将图片上传到服务器上，然后再拿到图片的链接，这样才能实现图片预览。而服务器呢，比如有两个文件夹，一个是临时文件夹，一个是正式文件夹，临时文件夹会定时进行清理，正式文件夹是用户确认使用的图片存储的位置。HTML5的 File API允许浏览器访问本地文件系统，借助它我们可以实现以前无法实现...
html5实现图片预览和查看原图
we
06-01 3038
html5 从一开始就给开发者很多的期待，提供众多新的 API，不用再想以前一样，为了实现某个功能写很多的代码。在以前，如果要实现图片预览会怎么做呢，因为为了安全的原因，web 端的 js 是不能读取文件的本地真实路径的，那么只能将图片上传到服务器上，然后再拿到图片的链接，这样才能实现图片预览。而服务器呢，比如有两个文件夹，一个是临时文件夹，一个是正式文件夹，临时文件夹会定时进行清理，正式文件夹是用户确认使用的图片存储的位置。现在 html5 提供的 API 不再让图片预览那么麻烦，FileReader 提
html 上传图片前预览,HTML实现图片上传前预览
weixin_29344197的博客
06-04 1172
HTML5 Upload#destination{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMethod=scale);}//处理file input加载的图片文件$(document).ready(function(e) {//判断浏览器是否有FileReader接口if(typeof FileRea...
html图片预览
11-14
总结，HTML图片预览利用了HTML5的File API和FileReader接口，通过读取和显示用户选择的图片文件，提供了良好的交互体验。在实现过程中需要注意兼容性、尺寸控制、跨域问题以及安全性与性能优化。通过这些技术，可以...
HTML5图片预览实例分享
09-28
本篇文章将深入探讨HTML5中的图片预览技术，并提供两个实际的代码示例。 首先，HTML5提供了两种方法来实现图片预览：URL.createObjectURL() 和 FileReader API。这两种方法都是基于Web Workers和Blob对象的，它们...
html 网页图片全屏预览 插件
07-29
"lightGallery"就是这样一个流行的图片预览插件，它能够支持各种浏览器，包括Chrome、Firefox、Safari、Edge等主流平台，确保了广泛的兼容性。 lightGallery的特点与功能包括： 1. **全屏模式**：点击图片后，...
JS前端HTML5图片预览手势缩放
07-21
()'>多图预览</button> function photoPreview(items) { var items = [{ src: "1.jpg", w: 1920, h: 1080, title: "第一张图片的提示" },{ src: "2.jpg", w: 1024, h: 768, title:...
利用HTML、CSS实现的图片预览弹出层的教程
09-25
在本文中，我们将探讨如何利用HTML、CSS以及jQuery来实现一个图片预览的弹出层功能，这个功能允许用户在点击图片后预览大图，并且可以切换不同的图片。我们将详细解析HTML结构、CSS样式以及JavaScript/jQuery代码，...
基于JAVA的厨艺交流平台（Vue.js+SpringBoot+MySQL）
08-01
基于Vue.js和SpringBoot的厨艺交流平台是一个功能丰富的在线社区，旨在为烹饪爱好者提供一个分享和学习烹饪技巧的平台。该平台分为管理后台和用户网页端，支持管理员和普通用户两种角色。管理后台提供对菜谱分类、菜谱信息、食材信息、商品信息和美食日志模块的全面管理功能，包括添加、编辑、删除和查询等操作。用户网页端则为用户提供了一个友好的界面，可以浏览和搜索各种菜谱，查看食材和商品信息，发表自己的美食日志，与其他用户互动交流。整个平台采用现代化的前端技术和后端框架，保证了良好的用户体验和高效的数据处理能力。 演示录屏：https://www.bilibili.com/video/BV1uz42197zu 配套教程：https://www.bilibili.com/video/BV1pW4y1P7GR
层次分析法数学建模论文.doc
最新发布
08-01
层次分析法数学建模论文
操作系统原理试卷及参考答案(A).doc
08-01
操作系统原理试卷及参考答案(A)
html 图片预览弹框
08-15
HTML 图片预览弹框是一种在网页中显示图片的方式。它通过点击图片或者其他触发事件，在当前页面弹出一个窗口或者层来显示图片。这种预览弹框的功能主要包括两个方面：显示图片和操作图片。 要实现图片的预览，可以使用 JavaScript 或者CSS。一种常见的方法是使用 JavaScript 插件，比如 Fancybox、Lightbox 或者 Magnific Popup。这些插件可以通过添加特定的 Class 属性和触发事件来实现图片预览效果。通过在 HTML 页面中引入相应的 JavaScript 和 CSS 文件并初始化插件，即可将图片链接转换为预览弹框。 预览弹框一般允许用户对图片进行操作，比如放大、缩小、旋转、下载等。这需要在预览弹框中添加相应的按钮或者控制条，并编写 JavaScript 代码来实现这些功能。 除了使用插件，也可以通过自定义 CSS 和 JavaScript 来实现图片的预览弹框。通过设置预览弹框的样式和布局，并添加鼠标事件的监听器，可以响应用户的操作并动态改变图片的显示状态。 在实际开发中，可以根据具体需求来选择合适的方法和技术来实现图片预览弹框。无论是使用插件还是自定义开发，都需要注意图片预览弹框的性能和用户体验，确保页面加载速度和功能的良好交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值