Initial commit

.gitignore

+.idea
+node_modules

README.md

+# N年前写的年会抽奖程序
+
+[demo](https://fouber.github.io/lottery/)
\ No newline at end of file

css/reset.css

+* {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  cursor: pointer;
+}
+
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
+form, fieldset, input, textarea, p, blockquote, th, td {
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    word-break: break-all;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+fieldset, img {
+    border: 0;
+}
+
+address, caption, cite, code, dfn, em, strong, th, var {
+    font-weight: normal;
+    font-style: normal;
+}
+
+ol, ul {
+    list-style: none;
+}
+
+caption, th {
+    text-align: left;
+}
+
+h1, h2, h3, h4, h5, h6, i {
+    font-weight: normal;
+    font-style: normal;
+    font-size: 100%;
+}
+
+q:before, q:after {
+    content:'';
+}
+
+abbr, acronym {
+    border: 0;
+}
+
+body {
+    font-family: "Hiragino Sans GB","DroidSansFallback","Microsoft YaHei","微软雅黑",arial,simsun;
+    color: #333;
+    line-height: 22px;
+    font-size: 16px;
+}
\ No newline at end of file

css/wall.css

+html, body {width: 100%; height: 100%;}
+.wall {width: 100%; height: 100%;
+    background-image: url(../img/icon-wall.jpg);
+    overflow: hidden;
+    background-color: #121936;
+    background-size: 100% 100% ;
+    background-position: center center;
+    background-repeat: no-repeat;}
+.photos-wall {width:100%; height:100%;}
+.messages {width: 30%;  float: left;  position: relative; top: 52px; left: 0}
+
+
+/*照片墙*/
+.wall .photos {width: 75%; height: 50%; float: left; position: relative; top: 270px; left: 100px; padding-left: 130px;}
+.wall .photo-title {
+    position: absolute;
+    top: -280px; left: 50%;
+    background: url(../img/title.png) no-repeat 0 0;
+    background-size: 100% auto;
+    width: 800px; height: 350px;
+    margin-left: -350px;
+}
+/*
+.wall .photo-title{position: absolute; top:-137px ;left:50%; background: url(../img/title.png) no-repeat 0 0;
+    background-size:380px 107px; width:380px; height: 107px; margin-left:-190px;}*/
+.wall .photo-content{width:100%;height: 100%; margin:0 auto; position: relative;}
+.wall .photo {position: absolute;}
+.wall .photo .photo-inner{position: relative; width:100%;height: 100%;}
+.wall .photo .photo-inner .img-wrap{position: absolute; top:0; left:0;}
+.wall .photo .photo-inner .old{z-index: 10; opacity: 1; -webkit-transform-origin: center center;  /*-webkit-transition:all 2s linear;*/}
+.wall .photo .photo-inner .new{z-index: 11; opacity: 0; -webkit-transform-origin: center center; /*-webkit-transition:all 2s linear;*/}
+.wall .photo .photo-inner .show{-webkit-animation: show_photo 2s ease-in-out;}
+.wall .photo .photo-inner .hide{-webkit-animation: hide_photo 2s ease-in-out;}
+@-webkit-keyframes show_photo{
+    0% {opacity:0;-webkit-transform:scale(0, 0);}
+    100% { opacity:1;-webkit-transform:scale(1, 1);}
+}
+@-webkit-keyframes hide_photo{
+    0% {opacity:1;}
+    100% { opacity:0;}
+}
+/*.wall .photo .photo-inner .old{z-index: 10; opacity: 1; -webkit-transition:all 2s linear;}*/
+/*.wall .photo .photo-inner .new{z-index: 11; opacity: 0; -webkit-transition:all 2s linear;}*/
+/*.wall .photo .photo-inner .show{opacity: 1;}*/
+/*.wall .photo .photo-inner .hide{opacity: 0;}*/
+
+.wall .photo img {
+    width: 100%; height: 100%;
+    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.8);
+}
+
+.wall .pos-0 {top:10px; left:0;width:65px; height:65px;}
+.wall .pos-1 {top:30px; left:70px;width:70px; height:70px;}
+.wall .pos-2 {top:0; left:145px;width:100px;height:100px;}
+.wall .pos-3 {top:30px; left:250px;width:70px; height:70px;}
+.wall .pos-4 {top:55px; left:325px;width:100px;height:100px;}
+.wall .pos-5 {top:70px; left:430px;width:85px;height:85px;}
+.wall .pos-6{top:15px; left:520px;width:65px;height:65px;}
+.wall .pos-7{top:-15px; left:595px;width:80px;height:80px;}
+
+.wall .pos-8{top:105px; left:40px;width:80px;height:80px;}
+.wall .pos-9{top:105px; left:125px;width:80px;height:80px;}
+.wall .pos-10{top:105px; left:210px;width:110px;height:110px;}
+.wall .pos-11{top:160px; left:325px;width:85px;height:85px;}
+.wall .pos-12{top:160px; left:415px;width:80px;height:80px;}
+.wall .pos-13{top:160px; left:500px;width:100px;height:100px;}
+.wall .pos-14{top:85px; left:520px;width:70px;height:70px;}
+
+.wall .pos-15{top:265px; left:-55px;width:80px;height:80px;}
+
+.wall .pos-16{top:190px; left:30px;width:70px;height:70px;}
+.wall .pos-17{top:190px; left:105px;width:100px;height:100px;}
+
+.wall .pos-18{top:220px; left:210px;width:110px;height:110px;}
+
+.wall .pos-19{top:250px; left:325px;width:85px;height:85px;}
+.wall .pos-20{top:245px; left:415px;width:75px;height:75px;}
+.wall .pos-21{top:265px; left:500px;width:85px;height:85px;}
+.wall .pos-22{top:70px; left:595px;width:85px;height:85px;}
+.wall .pos-23{top:160px; left:605px;width:75px;height:75px;}
+.wall .pos-24{top:240px; left:605px;width:65px;height:65px;}
+.wall .pos-25{top:310px; left:650px;width:60px;height:60px;}
+.wall .pos-26{top:265px; left:37px;width:65px;height:65px;}
+.wall .pos-27{
+    top: 15px;
+left: 685px;
+width: 65px;
+height: 65px;}
+.wall .pos-28{top: -67px;
+left: 685px;
+width: 75px;
+height: 75px;}
+
+
+
+.wall .pos-29{top: 103px;
+left: -44px;
+width: 75px;
+height: 75px;}
+.wall .pos-30{top: -45px;
+left: -81px;
+width: 75px;
+height: 75px;}
+
+.wall .pos-31 {
+top: 295px;
+left: 105px;
+width: 60px;
+height: 60px;
+}
+
+.wall .pos-32 {
+top: 240px;
+left: 675px;
+width: 65px;
+height: 65px;
+}
+
+.wall .messages {width: 25%;  float: right; position: relative; top: 77px; left: 0;}
+/*.wall .messages {width: 25%;float: right;position: relative;top: 80px;left: 0;}*/
+/*.wall .message {  margin: 25px 35px 25px 10px;}*/
+.wall .message {margin: 25px 35px 25px 50px;}
+.wall .message span {line-height: 25px;color: #000000;font-size: 18px;display: inline-block;padding: 5px;margin: 0;}
+
+.wall .message{height: auto;overflow: hidden;opacity: 1;}
+.wall .message.newMsg {-webkit-animation: change_height .7s linear;}
+    @-webkit-keyframes change_height{
+        0% {opacity:0;height: 0;}
+        100% { opacity:1;height:32px;}
+    }
+
+.wall .message .message-inner{position: relative; float:right; display: inline-block; background: #ffffff; border: 1px solid #ffffff; border-radius: 4px;margin-right: 20px;}
+
+.wall .message .message-inner:before {content: '';width: 0;height: 0;border-width: 5px 11px 0px 11px;position: absolute;border-style: solid;border-color: transparent transparent transparent #ffffff;right: -19px;bottom: -1px;}
+  
+#qrcode{width:105px;height:105px;position: absolute;top:20px;left:20px;}
+#qrcode img{width:100%;}
+#qrcode {background: white; padding: 5px;}
+
+.logo{color:#D13C3F;font-family: "Microsoft YaHei"; font-weight: bold; font-size: 13px; position: absolute;left:20px; bottom:20px;}
\ No newline at end of file

js/member.js

+
+// 余国良  余国安 汪路 田玲玲 夏芬美 赵雅君 高美平 鄢婳 臧叶子 陈韬 陈蕾蕾 黄杰 朱相平 李玲玲 杨心竹 王爽 王斗斗 姜中华 郑建生
+var member = [
+  {
+    "phone": "余国良",
+    "name": "余国良"
+  },
+  {
+    'phone':'余国安',
+    "name":"余国安"
+  },
+  {
+    'phone':'田玲玲',
+    "name":"田玲玲"
+  },
+  {
+    'phone':'汪路',
+    "name":"汪路"
+  },
+  {
+    'phone':'夏芬美',
+    "name":"夏芬美"
+  },
+  {
+    'phone':'赵雅君',
+    "name":"赵雅君"
+  },
+  {
+    'phone':'高美平',
+    "name":"高美平"
+  },
+  {
+    'phone':'鄢婳',
+    "name":"鄢婳"
+  },
+  {
+    'phone':'臧叶子',
+    "name":"臧叶子"
+  },
+  {
+    'phone':'陈韬',
+    "name":"陈韬"
+  },
+  {
+    'phone':'陈蕾蕾',
+    "name":"陈蕾蕾"
+  },
+  {
+    'phone':'黄杰',
+    "name":"黄杰"
+  },
+  {
+    'phone':'朱相平',
+    "name":"朱相平"
+  },
+  // 李玲玲 杨心竹 王爽 王斗斗 姜中华 郑建生
+  {
+    'phone':'李玲玲',
+    "name":"李玲玲"
+  },
+  {
+    'phone':'杨心竹',
+    "name":"杨心竹"
+  },
+  {
+    'phone':'王爽',
+    "name":"王爽"
+  },
+  {
+    'phone':'王斗斗',
+    "name":"王斗斗"
+  },
+  {
+    'phone':'姜中华',
+    "name":"姜中华"
+  },
+  {
+    'phone':'郑建生',
+    "name":"郑建生"
+  }
+];
\ No newline at end of file