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