登录  /  注册
javascript - 有没有什么简单一点的图片点击放大缩小的js啊
習慣沉默
習慣沉默 2017-05-19 10:47:30
[JavaScript讨论组]
0 2 599
举报

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

習慣沉默
習慣沉默

全部回复(2)
淡淡烟草味
淡淡烟草味2017-05-19 10:49:30 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就是看的这书
赞 +0
添加回复
我想大声告诉你
我想大声告诉你2017-05-19 10:49:30 1楼

http://photoswipe.com/ 这个不就挺好的吗。
赞 +0
添加回复
专题推荐
更多>
热门话题
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部