新增单页面

realwds · May 23, 2024 · 719996b · 719996b
1 parent 03685a6
commit 719996b
Show file tree

Hide file tree

Showing 3 changed files with 300 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -20,6 +20,8 @@
 | 12  |[div全屏显示](https://github.com/realwds/super-single-page/blob/gh-pages/pages/div全屏显示.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/div全屏显示.html)|
 | 13  |[阿里云盘公告页](https://github.com/realwds/super-single-page/blob/gh-pages/pages/阿里云盘公告页.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/阿里云盘公告页.html)|
 | 14  |[新浪每日搞笑动图](https://github.com/realwds/super-single-page/blob/gh-pages/pages/新浪每日搞笑动图.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/新浪每日搞笑动图.html)|
+| 15  |[照片墙特效](https://github.com/realwds/super-single-page/blob/gh-pages/pages/照片墙特效.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/照片墙特效.html)|
+| 16  |[抽奖小游戏](https://github.com/realwds/super-single-page/blob/gh-pages/pages/抽奖小游戏.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/抽奖小游戏.html)|
 
 ## packages
 

diff --git a/pages/抽奖小游戏.html b/pages/抽奖小游戏.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<title>抽奖</title>
+	<style>
+		* {
+			margin: 0;
+			padding: 0;
+		}
+
+		.container {
+			margin: 50px auto;
+			width: 300px;
+			height: 200px;
+		}
+
+		h2 {
+			text-align: center;
+		}
+
+		span {
+			display: inline-block;
+		}
+
+		#list {
+			margin-top: 20px;
+			width: 298px;
+			height: 40px;
+			text-align: center;
+			font-size: 20px;
+			font-weight: bold;
+			color: red;
+			line-height: 40px;
+		}
+
+		#start {
+			margin-left: 90px;
+		}
+
+		#start,
+		#stop {
+			margin-top: 30px;
+			margin-right: 10px;
+			text-align: center;
+			width: 50px;
+			height: 30px;
+			background: rgb(0, 51, 102);
+			text-align: center;
+			line-height: 30px;
+			cursor: pointer;
+			color: #fff;
+			border-radius: 6px;
+		}
+
+		.decription {
+			width: 350px;
+			height: 200px;
+			margin: 100px auto;
+		}
+	</style>
+</head>
+
+<body>
+	<div class="container">
+		<h2>开始抽奖了</h2>
+		<span id="list">马上开奖</span>
+		<span id="start">开始</span>
+		<span id="stop">停止</span>
+	</div>
+	<div class="decription">
+		<p>说明：鼠标或者键盘回车键控制抽奖或者结束</p>
+	</div>
+
+	<script type="text/javascript">
+		var list = document.getElementById('list'),
+			start = document.getElementById('start'),
+			stop = document.getElementById('stop');
+		var arr = ["苹果笔记本", "小米6", "nubia Z17", "ipod", "ipad mini2", "iPhone 8", "谢谢惠顾", "50元代金券", "1000元代金券", "iPhone X"];
+		var timer = null;
+		var flag = 0;
+
+		window.onload = function () {
+			start.onclick = playFun;
+			stop.onclick = stopFun;
+
+			document.onkeyup = keyupEvent;
+
+		}
+
+		//键盘事件
+		function keyupEvent(e) {
+			e = e || window.event;
+			if (flag == 0) {
+				if (e.keyCode == 13) {
+					playFun();
+					flag = 1;
+				}
+			} else {
+				stopFun();
+				flag = 0;
+			}
+		}
+
+		//鼠标点击事件
+		function playFun() {
+			clearInterval(timer);
+			timer = setInterval(function () {
+				var random = Math.floor(Math.random() * arr.length);
+				list.innerText = arr[random];
+			}, 50);
+			start.style.background = 'rgb(153, 153, 153)';
+		}
+
+		function stopFun() {
+			clearInterval(timer);
+			start.style.background = 'rgb(0, 51, 102)';
+		}
+	</script>
+</body>
+
+</html>
diff --git a/pages/照片墙特效.html b/pages/照片墙特效.html
@@ -0,0 +1,175 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>超好看的照片墙</title>
+  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
+  <style>
+    #img {
+      width: 503px;
+      height: 252px;
+      margin: 50px auto;
+      perspective: 700px;
+      -webkit-perspective: 700px;
+    }
+
+    #img img {
+      width: 50px;
+      height: 50px;
+      float: left;
+    }
+
+    #btn {
+      width: 100px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      font-size: 16px;
+      color: #000;
+      background: #0fc;
+      border-radius: 5px;
+      margin: 0 auto;
+      padding: 5px 5px;
+      cursor: pointer;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="img">
+    <img src="http://www.jq22.com/img/cs/500x500-1.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-2.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-4.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-5.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-6.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-7.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-8.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-9.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-1.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-2.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-4.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-5.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-6.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-7.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-8.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-9.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-1.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-2.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-4.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-5.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-6.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-7.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-8.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-9.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-1.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-2.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-4.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-5.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-6.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-7.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-8.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-9.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-1.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-2.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-4.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-5.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-6.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-7.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-8.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-9.png" alt="">
+    <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
+  </div>
+  <div id="btn">点击查看效果</div>
+
+  <script>
+    /*
+      1.闪的效果（瞬间高度宽度变为0，scale,随机）
+      2.图片由小变大，同时透明度由1-0
+      3.图片旋转，同时透明度由0-1
+    */
+    window.onload = function () {
+      var btn = document.getElementById('btn');
+      var imgs = document.getElementsByTagName("img");
+      var on = true;
+
+      btn.onclick = function () {
+        if (!on) {
+          return;
+        }
+        on = false;
+        var endNum = 0; //运动完成的图片数量
+        for (var i = 0; i < imgs.length; i++) {
+          (function (i) {
+            setTimeout(function () {
+              montion(imgs[i], '1s', function () {
+                this.style.transform = 'scale(0)';
+              }, function () {
+                montion(this, "1s", function () {
+                  this.style.transform = 'scale(1)';
+                  this.style.opacity = '0';
+                }, function () {
+                  endNum++;
+                  if (endNum == imgs.length) {
+                    toBig();
+                  }
+                })
+              })
+            }, Math.random() * 1000);
+          })(i)
+        }
+      };
+
+      //第三个效果
+      function toBig() {
+        /*
+          坐标轴（X，Y,z）
+        */
+        var allEnd = 0;
+        for (var i = 0; i < imgs.length; i++) {
+          imgs[i].style.transition = "";
+          imgs[i].style.transform = 'rotateY(0deg) translateZ(-' + Math.random() * 500 + 'px)';
+          (function (i) {
+            setTimeout(function () {
+              montion(imgs[i], '2s', function () {
+                this.style.opacity = 1;
+                this.style.transform = 'rotateY(-360deg) translateZ(0)';
+              }, function () {
+                allEnd++;
+                if (allEnd == imgs.length) {
+                  on = true;
+                }
+              });
+            }, Math.random() * 1000);
+          })(i)
+        }
+      }
+
+      //运动函数（运动的对象，时间，属性函数，回调）
+      function montion(obj, time, doFn, callBack) {
+        obj.style.transition = time;
+        doFn.call(obj); //调用函数，并把this的指向给obj
+        var called = false
+        obj.addEventListener('transitionend', function () {
+          if (!called) {
+            callBack && callBack.call(obj);
+            called = true;
+          }
+        }, false);
+      }
+    }
+  </script>
+
+</body>
+
+</html>