html图片点击缩放

最新推荐文章于 2025-05-19 11:30:08 发布

菜鸟凯一枚

最新推荐文章于 2025-05-19 11:30:08 发布

阅读量5.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：源代码文章标签： html图片点击缩放

本文链接：https://blog.youkuaiyun.com/qq_37782076/article/details/83781728

源代码专栏收录该内容

12 篇文章

订阅专栏

本文介绍了两种在HTML中实现图片点击后缩放的方法。第一种方法直接通过CSS样式变化实现；第二种方法则通过添加JavaScript事件监听，动态改变图片的尺寸来达到缩放效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方法

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/JavaScript">
        window.onload = function(){
              var img = document.getElementById("img");
                img.ondblclick = function(){
                    if(this.width == this.attributes['default_width'].value && this.height == this.attributes['default_height'].value){
                        this.width *=3;
                        this.height *= 3;
                    }else{
                        this.width = this.attributes['default_width'].value ;
                        this.height = this.attributes['default_height'].value;
                    }
                }
        };
    </script>
</head>
<body>
    <img src="../img7.jpg" width="200" height="200" default_width=200 default_height=200 id="img"/>
</body>
</html>

第二种写一个监听事件，对img标签进行监听

 <el-dialog class="case-info-dialog" title="案例详情" :visible.sync="dialogVisible">
      <div class="content-container dialog-container">
        <div class="case-title">{{caseInfo.title}}</div>
        <div class="case-other">
          <div class="case-other--classify">{{caseInfo.appName}}</div>
          <div class="case-other--date">{{caseInfo.updateDate}}</div>
        </div>
        <div class="case-content" @click="photoReviewHandler" v-html="caseInfo.contentHtml"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

// 该混合只试用当不存在图片不是已知的情况，
// 如 动态详情、产品商详情、案例详情，这些内容中的图片是服务端直接返回的html串，需要动态的抓取

import VuePhotpswipe from '@/components/photoSwiper';
// import { RESOURCEORIGN } from '@/global';

export default {
  data() {
    return {
      images: [],
    };
  },
  methods: {
    // 监听点击的元素是否是IMG标签，若是，则全屏展示
    photoReviewHandler(e) {
      console.log(e);
      const element = e.srcElement;
      if (element.tagName === 'IMG') {
        this.images.forEach((ele, idx) => {
          if (element.src.indexOf(ele) > -1) {
            this.openPhotoSwipeMixins(e.srcElement, idx, this.images);
          }
        });
      }
    },
    openPhotoSwipeMixins(element, index = 0, images) {
      const list = [];
      const clientWidth = document.documentElement.clientWidth;
      images.forEach((e) => {
        const w = element.naturalWidth;
        const h = element.naturalHeight;
        // const w = document.querySelector(`img#image${idx}`).naturalWidth;
        // const h = document.querySelector(`img#image${idx}`).naturalHeight;
        const rate = w / h;
        const wt = clientWidth - 20;
        const wh = wt / rate;
        // const url = /^http/.test(e) ? e : `${RESOURCEORIGN}${e}`;
        list.push({
          src: e,
          // src: url,
          w: wt || clientWidth,
          h: wh || clientWidth,
        });
      });
      VuePhotpswipe.open(index, list);
    },
  },
};

import Vue from 'vue';
/* eslint linebreak-style: 0 */
import PhotoSwipe from 'photoswipe/dist/photoswipe';
import PhotoSwipeDefaultUI from 'photoswipe/dist/photoswipe-ui-default';
import VuePhotoswipe from './VuePhotoswipe';

let instance;

export default {
  open(index, items, opts) {
    if (!instance) {
      const Vp = Vue.extend(VuePhotoswipe);
      instance = new Vp({
        el: document.createElement('div'),
      });
      document.body.appendChild(instance.$el);
    }
    const pswpElement = document.querySelectorAll('.pswp')[0];
    const options = {
      fullscreenEl: false,
      shareEl: false,
      tapToClose: true,
      history: false,
      focus: false,
      showAnimationDuration: 0,
      hideAnimationDuration: 0,
      index,
      maxSpreadZoom: 5,
    };
    Object.assign(options, opts);
    const gallery = new PhotoSwipe(pswpElement, PhotoSwipeDefaultUI, items, options);
    gallery.init();
  },
};

<template>
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <!-- Background of PhotoSwipe.
  It's a separate element as animating opacity is faster than rgba(). -->
  <div class="pswp__bg"></div>
  <!-- Slides wrapper with overflow:hidden. -->
  <div class="pswp__scroll-wrap">
  <!-- Container that holds slides.
  PhotoSwipe keeps only 3 of them in the DOM to save memory.
  Don't modify these 3 pswp__item elements, data is added later on. -->
  <div class="pswp__container">
    <div class="pswp__item"></div>
    <div class="pswp__item"></div>
    <div class="pswp__item"></div>
  </div>
  <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
  <div class="pswp__ui pswp__ui--hidden">
    <div class="pswp__top-bar">

      <!--  Controls are self-explanatory. Order can be changed. -->

      <div class="pswp__counter"></div>

      <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

      <button class="pswp__button pswp__button--share" title="Share"></button>

      <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

      <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

      <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
      <!-- element will get class pswp__preloader--active when preloader is running -->
      <div class="pswp__preloader">
        <div class="pswp__preloader__icn">
          <div class="pswp__preloader__cut">
            <div class="pswp__preloader__donut"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
      <div class="pswp__share-tooltip"></div>
    </div>
    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
    <div class="pswp__caption">
      <div class="pswp__caption__center"></div>
    </div>
  </div>
</div>

</div>
</template>

<script>
/* eslint linebreak-style: 0 */
import 'photoswipe/dist/photoswipe.css';
import 'photoswipe/dist/default-skin/default-skin.css';

export default {
  name: 'vue-Photpswipe',
};
</script>
<style scoped>
  .pswp{
    z-index: 4000;
  }
</style>