javascript - 有没有什么简单一点的图片点击放大缩小的js啊

问题描述

问 题

想在html中引用一个可以放大缩小图片的js，
最好是那种采用两种图片的，一个大图一个小图的，
要做商城的评论晒图功能
有没有简单一点的，不太懂

解决方案

一般这种功能需要很多功能，比如点击时大图蹦出来的动画效果，遮罩层，图片是否需要变成一个可控队列等等，所以功能一多了，自然代码就多了，一般要么做成JQ扩展对象方法插件，要么就是js的构造函数，ES6的class等实现。

如果你之需要一个最简单的点击小图蹦出大图功能- -这里有个最原始的。。
直接查看例子：https://jsfiddle.net/v1sgnuhp/

小图的点击区域

<a class="show-big-pic" href="大图的路径">
 <img src="小图的路径">
</a>

大图的显示区域

<div class="big-pic"><img src="" alt=""></div>

css

  * {margin: 0;padding: 0; }
  img {vertical-align: top; }

  .show-big-pic {position: absolute;margin-left: 200px;margin-top: 200px;}
  .big-pic {position: absolute;display: none;}
  
  .big-pic.active {z-index: 999;display: block; }

js

  let smallPic = document.querySelector('.show-big-pic');
  let bigPic = document.querySelector('.big-pic');
  let bigImg = bigPic.querySelector('img');
  smallPic.onclick = function(e) {
    e.preventDefault();
    bigImg.src = this.href;
    bigPic.classList.add('active');
  };
  bigPic.onclick = function() {
    if (bigPic.classList.contains('active')) {
      bigPic.classList.remove('active');
      bigImg.src = '';
    }
  };

出自《Javascript Dom 编程艺术》稍微改了下。。。记得当年第一次学JS就是看的这书

这篇关于javascript - 有没有什么简单一点的图片点击放大缩小的js啊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！