H5 查看大图。缩放图片

最新推荐文章于 2024-04-30 11:43:42 发布
最新推荐文章于 2024-04-30 11:43:42 发布
阅读量8.4k 收藏 6
点赞数 1
分类专栏： 前端 文章标签： swiper 图片查看 图片缩放
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jioho_chen/article/details/86622845
版权

之前前前后后找了很多类似的JS库，都非常的优秀，比如 viewerjs 或者其他。

然而这些JS库都太厉害了。封装的功能也是太多了，最重要的是这个库放大的图片。
并不能满屏，只能以实际上传的图片大小来显示

最后还是用了swiper。最后实现的效果：

  • 可以通过双击放大图片
  • 在移动端可以通过手指缩放放大/缩小图片

附上简单的源代码，写的比较简陋，仅供参考，可以稍作修改

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

  <style>
    #origin-img {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
    }

    #origin-img .swiper-slide img {
      width: 100%;
      vertical-align: middle;
    }

    .swiper-pagination {
      top: 1em;
      bottom: auto;
      color: #fff;
    }

    .upload {
      position: absolute;
      bottom: 0;
      line-height: 3em;
      background: rgba(0, 0, 0, .5);
      z-index: 5;
      color: #fff;
      text-indent: 1em;
      width: 100%;
    }
  </style>
</head>

<body>

  <div class="thumb" thumblist="list1">
    <img src="https://www.swiper.com.cn/demo/meituan1/uploads/s1_1.jpg" tppabs="https://www.swiper.com.cn/demo/meituan1/uploads/s1_1.jpg">
    <img src="https://www.swiper.com.cn/demo/meituan1/uploads/s1_2.jpg" tppabs="https://www.swiper.com.cn/demo/meituan1/uploads/s1_2.jpg">
    <img src="https://www.swiper.com.cn/demo/meituan1/uploads/s1_3.jpg" tppabs="https://www.swiper.com.cn/demo/meituan1/uploads/s1_3.jpg">
    <img src="https://www.swiper.com.cn/demo/meituan1/uploads/s1_4.jpg" tppabs="https://www.swiper.com.cn/demo/meituan1/uploads/s1_4.jpg">
  </div>

  <div class="thumb" thumblist="list2">
    <img src="https://www.swiper.com.cn/demo/meituan1/uploads/s2_1.jpg" tppabs="https://www.swiper.com.cn/demo/meituan1/uploads/s2_1.jpg">
    <img src="https://www.swiper.com.cn/demo/meituan1/uploads/s2_2.jpg" tppabs="https://www.swiper.com.cn/demo/meituan1/uploads/s2_2.jpg">
  </div>

  <div class="thumb" thumblist="list3">
    <img src="https://www.swiper.com.cn/demo/meituan1/uploads/s3_1.jpg" tppabs="https://www.swiper.com.cn/demo/meituan1/uploads/s3_1.jpg">
  </div>

  <!-- Swiper -->
  <div class="swiper-container" id="origin-img">
    <div class="swiper-wrapper"></div>
    <div class="swiper-pagination"></div>
    <div class="upload">图片描述</div>
  </div>


  <script>
    imgsdata = {
      "list1": ["https://www.swiper.com.cn/demo/meituan1/uploads/s1_1.jpg" /*tpa=*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_2.jpg" /*tpa=*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_3.jpg" /*tpa=*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_4.jpg" /*tpa=*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_5.jpg" /*tpa=*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_6.jpg" /*tpa=*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_7.jpg" /*tpa=https://www.swiper.com.cn/demo/meituan1/uploads/s1_7.jpg*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_8.jpg" /*tpa=https://www.swiper.com.cn/demo/meituan1/uploads/s1_8.jpg*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_9.jpg" /*tpa=https://www.swiper.com.cn/demo/meituan1/uploads/s1_9.jpg*/
      ],
      "list2": ["https://www.swiper.com.cn/demo/meituan1/uploads/s2_1.jpg" /*tpa=https://www.swiper.com.cn/demo/meituan1/uploads/s2_1.jpg*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s2_2.jpg" /*tpa=https://www.swiper.com.cn/demo/meituan1/uploads/s2_2.jpg*/
      ],
      "list3": ["https://www.swiper.com.cn/demo/meituan1/uploads/s3_1.jpg" /*tpa=https://www.swiper.com.cn/demo/meituan1/uploads/s3_1.jpg*/ ],
    }

    var swiper = new Swiper('.swiper-container', {
      zoom: true,
      width: window.innerWidth,
      virtual: true,
      spaceBetween: 20,
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
      },
      on: {
        click: function () {
          $('#origin-img').fadeOut('fast');
          this.virtual.slides.length = 0;
          this.virtual.cache = [];
          swiperStatus = false;

        },
      },

    });

    $('.thumb img').click(function () {
      clickIndex = $(this).index();

      imglist = $(this).parent().attr('thumblist');
      imgs = imgsdata[imglist];
      for (i = 0; i < imgs.length; i++) {
        swiper.virtual.appendSlide('<div class="swiper-zoom-container"><img src="' + imgs[i] + '" /></div>');
      }
      swiper.slideTo(clickIndex);
      $('#origin-img').fadeIn('fast');
      swiperStatus = true;

    })

    //切换图状态禁止页面缩放	
    document.addEventListener('touchstart', function (event) {
      if (event.touches.length > 1 && swiperStatus) {
        event.preventDefault();
      }
    })
    var lastTouchEnd = 0;
    document.addEventListener('touchend', function (event) {
      var now = (new Date()).getTime();
      if (now - lastTouchEnd <= 300) {
        event.preventDefault();
      }
      lastTouchEnd = now;
    }, false)

    document.addEventListener('touchmove', function (e) {
      if (swiperStatus) {
        e.preventDefault();
      }
    })
  </script>
</body>

</html>
Jioho_
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
h5 img js 点击图片放大_H5实现移动端图片预览：手势缩放， 手势拖动，双击放大......
weixin_39771987的博客
02-06 3831
查看示例效果：一、功能介绍图片预览主要有以下几个功能点组成：监听图片点击事件，进入图片预览模式自定义手势事件, (双指缩放，滑动，双击。。。)监听图片手势事件，通过 transform-matrix 实现图片的各种变换；二、实现方法1、图片预览模式图片预览即点击图片在页面中插入一个黑色全屏背景框并将图片居中显示。封装时，为了只对指定图片添加功能，可通过监听指定类名或添加某种属性的img标签监听；另...
h5中的图片点击放大
热门推荐
hailideboke的博客
01-17 1万+
在wkwebview的代理方法 //MARK: -- 加载完成 - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation 中加入js代码 //js方法遍历图片添加点击事件 返回图片个数      逻辑:      1.遍历获取全部的图片;（只获取detail-main div
移动端点击放大、缩放图片，微信端点击放大图片
03-12
移动端点击图片会变成全屏查看的模式，然后可以进行手势缩放。微信端点击放大图片
H5 Pinchzoom.js 插件实现手指触摸图片放大缩小
qq_37672347的博客
09-24 1695
Pinchzoom.js 官网： http://manuelstofer.github.io/pinchzoom/ 参考链接：https://blog.csdn.net/forever_yours/article/details/54930106
h5中echarts图表，增加双指缩放功能，支持区域缩放
最新发布
weixin_45346457的博客
04-30 721
起因：在h5的echarts中，数据量过多，增加了dataZoom，但是折线图依然不美观。产品希望通过双指移动事件，显示折线图的数据。1、echarts保留dataZoom，但是将height设置为0，start是0，end是100。3、监听手势，获得双指移动的缩放比例，更新echarts 的 dataZoom 范围。2、使用检测触摸手势的js库：hammer.js，检测手势。
html5 实现图片预览
2401_84150134的博客
04-19 925
和。
h5完美实现移动端 手势同时控制图片 旋转 拖拽 放大 的源码
04-11
使用hammer.js 可以手势控制同时进行旋转 拖拽 放大缩小功能， 解决官网移动旋转复位效果， 重点解决官网旋转rotate demo旋转乱跳bug 官网:http://hammerjs.github.io/ (官网的demo真是坑 又是复位又是旋转抖动的....双点触控就立马旋转造成抖动视觉效果的bug)
jQ 实现图片查看功能，拖动，放大缩小，旋转
huang_rui_min的博客
04-16 1857
其中拖拽功能和放大缩小是通过控制不同元素来实现的。如果在同一元素上实现，会有图片放大后，拖动位置难以定位的问题。用jq实现了一个简单的图片查看功能，可拖动，放大缩小旋转。放大缩小旋转用的是c3的transform属性实现的。如果有更好的视线方法，欢迎评论指正。废话不多说，直接上代码。
H5在移动端实现图片裁剪缩放功能
幸福的七种颜色的博客
03-29 1万+
最近在做一个固定比例的框，去放大缩小图片，让用户去裁切图片的过程。2018-03-29 目前的状态是画出了模型，并且可以在ios上实现放大缩小，使用gesturechange手势事件，但是安卓机不兼容，所以在找合适的解决方案中。2018-03-30 尝试了寻找办法，就从最基础的事件找起，touch事件，于是乎，我就打印出关于touch事件的属性，经过试验，还有网上的资料，touch有一个touch...
实现点击图片放大查看功能
qq_37266528的博客
05-29 9365
1.html 代码 <div id="imgEnlargeDiv" style="display: none; text-align: center;position: fixed;z-index: 1000;top: 0;left: 0; width: 100%;height: 100%;background-color: rgba(255,255,255,.9);"> ...
h5图片剪切、缩放、旋转、预览
10-25
2. **图片缩放**：用户可以放大或缩小图片，以便更好地查看细节或调整剪切范围。 3. **图片旋转**：允许用户按照任意角度旋转图片，这在处理拍摄角度不正或者需要调整构图的情况下非常有用。 4. **预览**：在上传...
html5图文布局点击图片弹出放大查看特效
11-17
html5图文布局点击图片弹出放大查看特效
zoomit:Html5 画布图像查看器专注于缩放容量和大图像
06-21
变焦 Zoomit 是一个 JavaScript 库，它解决了使用 canvas 元素创建图像查看器的问题。 它很容易实现，并带有一个例子。 Zoomit 是一个 javascript 库，允许您使用 DOM 的 CANVAS 元素创建图像查看器。 它非常易于使用，任何对 html 和 javascript 经验最少的人都可以实现。 ＃＃＃特征 无限变焦 通过单元格查看的新方法，无需平移、移动。 现在一切都集中在放大，缩小。 支持任何格式和大小的图像。 ＃＃＃＃ 例子 您可以在 test 文件夹中找到示例。 带有一个基本的 GUI。 ＃＃＃＃执照 麻省理工学院
强大的图片查看插件 基于jquery的viewer.js
11-21
强大的图片查看插件 基于jquery的viewer.js
H5 PhotoSwipe简单例子 vue图片拉伸放大缩放例子
11-27
**标题解析：** "H5 PhotoSwipe简单例子 - vue图片拉伸放大缩放例子" 这个标题表明我们要探讨的是一个使用H5技术，并结合PhotoSwipe库实现的Vue.js项目，该项目主要用于处理图片的放大、缩小和拉伸功能。 **描述...
移动端H5图片轮播缩放
10-23
在移动端H5开发中，图片轮播和缩放功能是非常常见且重要的元素，尤其是在展示产品、分享信息或者创建互动体验时。本资源基于Sencha Touch框架，为移动设备提供了高效且用户友好的图片轮播与缩放解决方案。下面将详细...
仿微信查看图片、H5的图片轮播插件PhotoSwipe、SuperSlide
12-06
在开发Web应用或移动H5页面时，常常需要实现图片查看和轮播的效果，以便用户可以轻松浏览一组图片。在这一领域，有两个知名的JavaScript插件备受开发者青睐：PhotoSwipe和SuperSlide。这两个插件都提供了丰富的功能...
h5实现点击图片全屏预览_微信小程序：常用功能6——点击图片，实现图片的预览功能...
weixin_36075657的博客
01-27 2949
向用户展示图片时，为了展现布局的美观性，往往不同尺寸的图片要放在相同大小的容器中。但是图片想让用户看清、或者保存时，我们就要进行图片的预览，像用户展示原图。图片预览接口：wx.previewImage(Object object, boolean showmenu)。在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。首先，我在百度找几张图片放在data里边待用这...
html放大图片或者查看图片点击放大
qq_23392319的博客
02-17 989
参考js链接，引用的
H5制作点击图片变成大图
05-31
要实现点击图片变成大图，可以使用HTML5中的`<img>`标签和CSS3中的伪类`:hover`来实现。具体实现步骤如下： 1. 首先，在HTML文件中添加一个`<img>`标签，指定要显示的图片路径： ```html <img src="images/picture.jpg" alt="Picture"> ``` 2. 然后，在CSS文件中为`<img>`标签添加样式，包括图片的尺寸、居中等： ```css img { display: block; margin: 0 auto; width: 300px; height: 200px; } ``` 3. 接着，在CSS文件中添加`:hover`伪类，当鼠标悬停在图片上时，显示大图，具体实现方法可以使用`transform: scale()`来实现缩放效果，同时使用`position: absolute`和`z-index`来控制大图的位置和层级： ```css img:hover { position: relative; z-index: 1; transform: scale(2); } ``` 完整的HTML和CSS代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Click to enlarge</title> <style> img { display: block; margin: 0 auto; width: 300px; height: 200px; } img:hover { position: relative; z-index: 1; transform: scale(2); } </style> </head> <body> <img src="images/picture.jpg" alt="Picture"> </body> </html> ``` 注意，这里的`<img>`标签的`src`属性值应该替换为你自己的图片路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值