css自学框架之图片灯箱展示

实现的功能是页面中的图片单击，在灯箱中显示，单击按钮上下切换，单击灯箱退出展示，效果如下GIF展示。

实现步骤还是老样子，三方面工作一是CSS、二是JavaSxcript，三是HTML，下面开始一步一步实现，最后可以下载完整源码。

一、CSS部分，这部分主要是定义样式，也就是我们看到的外表，背景黑色60%透明，上下切换按钮、鼠标样式、载入图片等待等。主要代码：

[myth-image=active]{cursor: pointer;cursor: zoom-in;}		
		.myth-image{top: 0;left: 0;right: 0;bottom: 0;z-index: 66;position: fixed;user-select: none;animation: fade-in .3s both;-webkit-animation: fade-in .3s both;}
		.myth-image.loading{ cursor: wait }
		.myth-image.remove:before{animation: fade-off .3s both; -webkit-animation: fade-off .3s both;}		
		.myth-image:before{top: 0;left: 0;right: 0;bottom: 0;content: '';position: absolute;background: rgba(0, 0, 0, .6);}		
		.myth-image .myth-prev, .myth-image .myth-next{top: 0;bottom: 0;width: 10%;height: 5em;margin: auto;max-width: 5em;cursor: pointer;position: absolute;transition: opacity .3s, transform .3s;}
		.myth-image .myth-prev:hover{ transform: translateX(-.5em) }
		.myth-image .myth-next:hover{ transform: translateX(.5em)  }
		.myth-image .myth-prev{
		    left: 0;
		    background: center/60% no-repeat url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjkpIj48cGF0aCBkPSJNMzI0LjIxMTUxNyA1MTEuODA1NjMxIDc4Ny44ODk1OTQgNzMuMDgyNTgzYzE2LjE5NDIyLTE2LjYzMDM2NSAxNi4xOTQyMi00My45NzQ3MDQgMC02MC42MDUwNjgtMTYuMTk0MjItMTYuNjMwMzY1LTQyLjQ5NTYwNy0xNi42MzAzNjUtNTguNjEzOTc2IDBMMjM1Ljc1MDExMyA0NzkuMzYwMzAyYy04LjY0NzAzMSA4Ljk2OTM5OC0xMi4zNDQ3NzUgMjAuOTM0OTE3LTExLjcxOTAwMyAzMi40NDUzMjktMC42NDQ3MzUgMTEuOTA4NjMgMy4wNzE5NzIgMjMuODc0MTQ5IDExLjcxOTAwMyAzMi44MjQ1ODVsNDkzLjUwNjU0MiA0NjYuODgyNzg4YzE2LjExODM2OSAxNi42NDkzMjcgNDIuNDM4NzE4IDE2LjY0OTMyNyA1OC42MTM5NzYgMCAxNi4xOTQyMi0xNy4wODU0NzEgMTYuMTk0MjItNDMuOTc0NzA0IDAtNjAuNjA1MDY4TDMyNC4yMTE1MTcgNTExLjgwNTYzMSI+PC9wYXRoPjwvc3ZnPg==);
		}
		.myth-image .myth-next{
		    right: 0;
		    background: center/60% no-repeat url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC45KSI+PHBhdGggZD0iTTEzNi43LDEwMGwtOTAuNiw4NS44Yy0zLjIsMy4yLTMuMiw4LjUsMCwxMS44YzMuMiwzLjMsOC4zLDMuMywxMS40LDBsOTYuNC05MS4yYzEuNy0xLjcsMi40LTQuMSwyLjMtNi40YzAuMS0yLjItMC42LTQuNi0yLjMtNi4zTDU3LjYsMi40Yy0zLjEtMy4yLTguMy0zLjItMTEuNCwwcy0zLjIsOC42LDAsMTEuOEwxMzYuNywxMDAiLz48L3N2Zz4NCg==);
		}		
		.myth-image .ended{opacity: .5;cursor: no-drop;}		
		.myth-image .myth-ball{top: 1em;right: 1em;width: 2em;height: 2em;opacity: 0;border-radius: 66%; position: absolute; pointer-events: none;transition: opacity .3s;border: .5em #fff solid;border-left-color: #3498db;border-left-color: var(--primary); animation: rotate .5s linear infinite paused;-webkit-animation: rotate .5s linear infinite paused;}
		.myth-image.loading .myth-ball{opacity: 1;animation-play-state: running;}		
		.myth-image img, .myth-image video{top: 0;left: 0;right: 0;bottom: 0;margin: auto;max-width: 80%;max-height: 90%;cursor: zoom-out;position: absolute;transition: transform .3s;animation: fade-small-large .3s backwards;-webkit-animation: fade-small-large .3s backwards;}
		
		.myth-image video{cursor: auto;}		
		.myth-image img:not([src]), .myth-image video:not([src]){display: none;}		
		.myth-image.remove img, .myth-image.remove video, .myth-image.remove .myth-prev, .myth-image.remove .myth-next{animation: fade-large-small .3s both;-webkit-animation: fade-large-small .3s both;}		
		.myth-image img[src$=".jpg"], .myth-image video{box-shadow: 0 5px 15px rgba(0, 0, 0, .5);}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

二、JavaScript部分，这部分主要实现图片单击展开灯箱，实现切换等一些列展示效果。具体代码如下，这部分代码要放在我们以前写的Myth.js对应位置。

image:function(){
			var that = this;
			var image_box = {
			    img: that.create("img"),
			    prev: that.create("div", {class: "myth-prev"}),
			    next: that.create("div", {class: "myth-next"}),
			    ball: that.create("div", {class: "myth-ball"})
			};
			image_box.wrap = that.create("div", {class: "myth-image", child: [
			    image_box.prev, image_box.img, image_box.next, image_box.ball
			]});
			image_box.wrap.onclick = function (e) {
			    image_box.wrap.classList.add("remove");
			    setTimeout(function () {
			        try{
			            document.body.removeChild(image_box.wrap);
			            image_box.wrap.classList.remove("remove");
			        }
			        catch (err){}
			    }, 300);
			};
			image_box.img.onload = function () {
			    image_box.wrap.classList.remove("loading");
			};
			// 设置按钮
			image_box.prev.onclick = function (e) {
			    e.stopPropagation();
			    if(current - 1 >= 0) current--;
			
			    actions.set();
			};
			image_box.next.onclick = function (e) {
			    e.stopPropagation();
			    if(current + 1 < that.dom.length) current++;
			
			    actions.set();
			};
			var current = 0;			
			var actions = {
			    ori: function (obj, num) {
			        obj.setAttribute("myth-image", "active");	
			        obj.onclick = function () {
			            current = num;
			            actions.set();
			            document.body.appendChild(image_box.wrap);
			        };
			    },
			    set: function () {
			        var img = that.dom[current];
			        current === 0 ? image_box.prev.classList.add("ended") : image_box.prev.classList.remove("ended");
			        current === that.length - 1 ? image_box.next.classList.add("ended") : image_box.next.classList.remove("ended");		
					
			        if(img.getAttribute("myth-original") !== null){
			            image_box.img.src = img.getAttribute("myth-original");
			        }
			        else if(img.src){
			            image_box.img.src = img.src;
			        }
			        else{
			            console.error("This image has no valid tag!");
			        }
			       image_box.wrap.classList.add("loading");
			    }
			};
				
			this.each(function(item){
				if(item.src ){
				    actions.ori(item, item.index);
				}
			});
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

三、HTML部分，该部分就是如何使用第一、二部分的代码。

<div class="mythBox mid">
		<p><img src="img/1.png" title="one" myth-image="active" class="myth-picbox" myth-original="img/1.png">p>
		<p><img src="img/2.png" title="one" myth-image="active" class="myth-picbox" myth-original="img/2.png">p>
		<p><img src="img/3.png" title="one" myth-image="active" class="myth-picbox" myth-original="img/3.png">p>
		<p><img src="img/4.png" title="one" myth-image="active" class="myth-picbox" myth-original="img/4.png">p>
	div>	
		<script type="text/javascript">
			myth('.myth-picbox').image();			
		script>
1
2
3
4
5
6
7
8
9

这部分代码分为两个部分，一是页面图片展示，二是JS调用实现灯箱效果。
源代码下载：请单击