正文

原生js和css实现点击图片预览放大(代码片段)

webchang  webchang  2022-12-13  508

关键词：

效果：

代码实现，可以直接复制到本地测试（把图片路径换一下）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3.图片预览</title>
  <style>
    .black_overlay 
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 100;
    

    .enlargeContainer 
      display: none;
    

    .enlargePreviewImg 
      /*这里我设置的是：预览后放大的图片相对于整个页面定位*/
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      
      /*宽度设置为页面宽度的70%，高度自适应*/
      width: 70%;
      z-index: 200;
    

	/*关闭预览*/
    .close 
      position: absolute;
      top: 20px;
      right: 20px;
      width: 20px;
      height: 20px;
      cursor: pointer;
      z-index: 200;
    
  </style>
</head>
<body>

<!--测试图片-->
<img src="./images/maying.jpg" id="toEnlargeImg">

<!--黑色遮罩-->
<div class="black_overlay" id="black_overlay"></div>

<!--预览容器，存放点击放大后的图片-->
<div class="enlargeContainer" id="enlargeContainer">
  <!-- 关闭按钮，一个叉号图片 -->
  <img src="./images/close.png" class="close" id="close">
</div>

<script>
  let black_overlay = document.getElementById('black_overlay');
  let enlargeContainer = document.getElementById('enlargeContainer');
  let closeBtn = document.getElementById('close');

  let toEnlargeImg = document.getElementById('toEnlargeImg');
  toEnlargeImg.addEventListener('click', function () 
    // 获取当前图片的路径
    let imgUrl = this.src;
    // 显示黑色遮罩和预览容器
    black_overlay.style.display = 'block';
    enlargeContainer.style.display = 'block';
    let img = new Image();
    img.src = imgUrl;
    img.classList.add('enlargePreviewImg');
    if (closeBtn.nextElementSibling) 
      enlargeContainer.removeChild(closeBtn.nextElementSibling);
    
    enlargeContainer.appendChild(img);
  );

  // 关闭预览
  closeBtn.addEventListener('click', function () 
    black_overlay.style.display = 'none';
    enlargeContainer.style.display = 'none';
  );
</script>

</body>
</html>

前端学习交流QQ群：862748629 点击加入

fastadmin框架中图片点击放大(代码片段)

fastadmin的原生图片预览,重新打开一个窗口太麻烦，使用layui做一个弹窗式的图片预览1、将下面代码放在backend-init.js文件中$(‘body‘).on(‘click‘,‘[data-tips-image]‘,function()varimg=newImage();varimgWidth=this.getAttribute(‘data-width‘)||‘480px... 查看详情

图片放大预览效果实现(代码片段)

...前言记录一下做项目的过程中遇到的图片放大预览效果的实现实现的是点击图片可以放大预览，这个效果在京东淘宝都可以看到首先为轮播图添加点击事件，以及得到每个图片对应的url数据<viewclass=&... 查看详情

vue图片点击放大预览v-viewer(代码片段)

图片放大预览功能参考网站：https://github.com/mirari/v-viewer 1、安装依赖npminstallv-viewer--save2、在main.js中全局引入importVuefrom‘vue‘;importViewerfrom‘v-viewer‘import‘viewerjs/dist/viewer.css‘Vue.use(Viewer)View 查看详情

点击图片放大图片预览左右切换(代码片段)

...gt;6<metahttp-equiv="X-UA-Compatible"content="ie=edge">7<title>点击图片放大图片预览左右切换</title>8<linkhref="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css"rel="stylesheet">9<scriptsrc="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"><... 查看详情

vue图片点击放大预览(代码片段)

第一种：viewerjs使用介绍(PC、移动端都兼容)1、先安装依赖 npminstallv-viewer--save 2、main.js内引用并注册调用//main.jsimportViewerfrom‘v-viewer‘import‘viewerjs/dist/viewer.css‘Vue.use(Viewer);Viewer.setDefaults(Options:"inline":true,"button":true,"navbar... 查看详情

原生js--实现放大镜效果(代码片段)

前言：效果虽丑，但是实现了基本功能。这里只放了重要代码，需要的话，点击链接下载https://download.csdn.net/download/TroyeSivanlp/43142340实现放大镜效果效果图js代码效果图js代码window.addEventListener('load',function()var... 查看详情

记录一个移动端图片预览（支持旋转），使用css强制旋转的坑(代码片段)

...t;我选择是vant组件自带的ImagePreview图片预览，用的css强制实现旋转，<2>出现的问题是样式可以旋转但是touch事件没有旋转，<3>导致现象是，旋转后放大后滑动图片，向右滑动-图片向下偏移，左-上，上-右，下-左。<4>... 查看详情

前端每日实战：116#视频演示如何用css和原生js开发一个监控网络连接状态的页面(代码片段)

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。https://codepen.io/comehope/pen/oPjWvw可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用chrome,safari,edge打开观看。https:/... 查看详情

layui——上传图片，并实现放大预览(代码片段)

...文件后会返回文件的路径，然后存储到数据库，那么首先实现上传后的放大和删除功能functionuploadSmallPic()varupload=layui.upload;upload.render(elem:‘#smallPic‘,url:‘/upload/uploadPic‘,auto:false,number:1,bindAction:‘#uploadSmallPic‘,choose:function(obj)var... 查看详情

原生js实现放大镜效果

效果：1、鼠标放上去会有半透明遮罩、右边会有大图片局部图2、鼠标移动时右边的大图片也会局部移动放大镜的关键原理：鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的相应位置；放大镜的... 查看详情

对于图片缩放预览查看js插件

...实用的jQuery图片放大预览Lightbox插件。zoomify.js可以在用户点击页面中的小图片时，将该图片的高清版本以Lightbox的方式放大显示在页面的中间，提高用户的体验度。使用该图片放大预览插件需要在页面中引入jquery和zoomify.min.js以... 查看详情

js实现异步上传图片+预览

两种js实现方式，一种用原生的ajax；另一种用JQuery，例子比较简单，直接上代码。<!DOCTYPEhtml><html><head><title>Title</title><linkhref="~/Content/Css/bootstrap.3.3.4.min.css"rel="stylesheet"/><scr 查看详情

9行代码实现图片上传和预览(自定义按钮上传)(代码片段)

9行代码实现图片上传和预览(自定义按钮上传)结果展示：默认展示2.点击按钮后，选择图片文件图片预览首先我们定义一个type为file的input，并将它隐藏，绘制一个button，在按钮点击事件中触发input的点击事件。... 查看详情

9行代码实现图片上传和预览(自定义按钮上传)(代码片段)

vue+elementui实现点击图片预览大图和预览视频(代码片段)

Vue+ElementUI实现在表格中点击图片预览大图和预览视频最近遇到一个需求:在表格中实现预览图片和查看视频预览图片功能:如下,是材料一栏的代码<el-table-columnprop="filesLoc"label="材料"><templateslot-scope=... 查看详情

react项目实现点击图片预览

...,使用Zmage标签包裹后的图片可以立即获得缩放效果,替代原生的img标签,也可以实现图片的翻转。（1）引入：importZmagefrom'react-zmage'（2）将页面中的img标签替换为Zmage<imgsrc="图片源连接"/>替换为<Zmagesrc="图片... 查看详情

记录-js简单实现购物车图片局部放大预览效果

...我在网上总结出来的一些知识，希望对大家有所帮助一、实现效果二、代码实现代码不多，先看一下 HTML 里面结构很简单，初始化 MagnifyingGlass 对象来关联一个 IMG 标签来实现放大。<!DOCTYPEhtml><html>... 查看详情

fancybox——图片点击放大插件(代码片段)

一、加载文件1<linkrel="stylesheet"href="https://cdn.staticfile.org/fancybox/3.0.47/jquery.fancybox.min.css">23<scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>45 查看详情