html 图片点击查看,Html点击实现图片预览和查看原图

最近博客有个需求，需要在文章页面，点击文章内的图片放大，再次点击缩小。写完之后特别分享一下。

源代码：

````

content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

蒲公英云

.imgViewDom {

display: none;

}

.disnone{

background: rgba(255, 255, 255, 0.8);

position: fixed;

top: 0;

left: 0;

height: 100%;

width: 100%;

z-index: 99999999;

overflow: auto;

display: -webkit-box;

-webkit-box-align: center;

-webkit-box-pack: center;

display: -moz-box;

-moz-box-align: center;

-moz-box-pack: center;

display: -o-box;

-o-box-align: center;

-o-box-pack: center;

display: -ms-box;

-ms-box-align: center;

-ms-box-pack: center;

display: box;

box-align: center;

box-pack: center;

}

$(document).ready(function () {

$(".imgViewDom2 img").click(function () {

let imageSrc = $(this).attr("src");

let jQuery = $('.imgViewDom').attr("src");

console.log(imageSrc);

if (jQuery==null){

$(".imgViewDom img").attr("src",imageSrc);

$(".imgViewDom").attr("class","imgViewDom disnone");

} else {

$(".imgViewDom").attr("class","imgViewDom");

}

});

$(".imgViewDom img").click(function () {

$(".imgViewDom").attr("class","imgViewDom");

});

````

效果演示我们依旧使用站内的：https://dandelioncloud.cn/tool/codedemo

然后将代码考入进去点击调试预览

![](/images/20210521/1621591450631.png)

![](/images/20210521/1621591505253.png)

![](/images/20210521/1621591515022.png)

点击图片预览，再点击返回。完成。

html 图片点击查看,Html点击实现图片预览和查看原图相关推荐

HTML5点击图片查看大图,科技常识：HTML5 实现图片预览和查看原图
今天小编跟大家讲解下有关HTML5 实现图片预览和查看原图 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5 实现图片预览和查看原图的相关资料,希望小伙伴们看了有所帮助. htm ...
点击预览或查看,报导航重复的问题
点击预览或查看,报导航重复的问题程序中跳转是这样的: this.$router.push({name: "assistant_look",params: { id: item.i ...
html5 预览图片原理,html5实现图片预览和查看原图
html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...
html图片查看代码实现,如何用HTML5实现图片预览和查看原图的功能
html5实现图片预览和查看原图 html5实现图片预览和查看原图相对以前容易多了,在以前,为了安全,web端的js是不能读取文件的本地真实路径的,只能将图片上传到服务器上,再取图片的链接,这样才能实 ...
html5实现图片预览和查看原图
html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...
计算机无法使用打印机预览,电脑中excel打印预览无法查看的处理方法
我们在处理数据时,经常都会使用到excel应用.不过,最近一位用户反馈自己电脑中excel的打印预览突然无法查看了.这是怎么回事呢?我们要如何操作?接下来,就随系统城小编一起看看该问题的解决方法吧! ...
macOS 使用 QuickLook 预览高亮查看任意代码源文件
macOS 使用 QuickLook 预览高亮查看任意代码源文件很多源码文件 macOS 默认不支持通过空格快速查看,比如 Flutter 的 .dart 文件.YAML 的 .yaml..yml. ...
elementui 使用el-image 控件解决通过点击查看按钮两次才能实现预览图片
需求:点击查看按钮,将图片显示出来. 问题:查看按钮必须触发两次才会将图片显示出来前端效果: 点击查看按钮,弹出来图片图片展示: 解决方法有两种: 第一种调用Image 的源码中的image-v ...
java 图片上一张下一张_java实现预览图片,点击实现下一张
项目上需要实现图片预览功能,页面展示图片的预览小图,点击时弹出层展示原图,可以点击上一张和下一张等效果 1.本文将简单具体介绍实现的全过程,前后台代码和需要用到的插件 2.先上效果图加载页面的效果 ...

html 图片点击查看,Html点击实现图片预览和查看原图

html 图片点击查看,Html点击实现图片预览和查看原图相关推荐

最新文章

热门文章