javascript - 有没有什么简单一点的图片点击放大缩小的js啊
習慣沉默
習慣沉默 2017-05-19 10:47:30
0
2
772

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

習慣沉默
習慣沉默

全部回复(2)
淡淡烟草味

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

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

小图的点击区域

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

大图的显示区域

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

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就是看的这书

我想大声告诉你

http://photoswipe.com/ 这个不就挺好的吗。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板