想在html中引用一个可以放大缩小图片的js,最好是那种采用两种图片的,一个大图一个小图的,要做商城的评论晒图功能有没有简单一点的,不太懂
一般这种功能需要很多功能,比如点击时大图蹦出来的动画效果,遮罩层,图片是否需要变成一个可控队列等等,所以功能一多了,自然代码就多了,一般要么做成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/ 这个不就挺好的吗。
一般这种功能需要很多功能,比如点击时大图蹦出来的动画效果,遮罩层,图片是否需要变成一个可控队列等等,所以功能一多了,自然代码就多了,一般要么做成JQ扩展对象方法插件,要么就是js的构造函数,ES6的class等实现。
如果你之需要一个最简单的点击小图蹦出大图功能- -这里有个最原始的。。
直接查看例子:https://jsfiddle.net/v1sgnuhp/
小图的点击区域
大图的显示区域
css
js
出自《Javascript Dom 编程艺术》稍微改了下。。。记得当年第一次学JS就是看的这书
http://photoswipe.com/ 这个不就挺好的吗。