init

mobile/templates/default/festival/TanabataFestival/css/style.css

@@ -0,0 +1,857 @@
+body,
+html,
+img,
+div,
+a,
+p,
+form,
+input {
+    margin: 0;
+    padding: 0;
+    font-size: 100%;
+    font-family: "PingFang SC Light", 'Heiti SC';
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    cursor: pointer;
+}
+.maincontent {
+    width: 750px;
+    height: 100%;
+    margin: 0 auto;
+}
+
+img {
+    border: none;
+}
+.ml6 {
+  margin-left: 6px;
+}
+
+.hide {
+    display: none;
+}
+
+.show {
+    display: block;
+}
+
+.position_a {
+    position: absolute;
+}
+.border1 {
+  position: relative;
+}
+.border1::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  transform: scale(.5);
+  transform-origin: 0 0;
+  pointer-events: none;
+  box-sizing: border-box;
+  border: 0 solid #dddef2;
+  border-width: 1px;
+}
+.ab_center {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+.loading_page {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+    background: #ffffff;
+}
+
+.loading {
+    display: table;
+    width: 100%;
+    height: 100%;
+}
+
+.loading p {
+    display: table-cell;
+    font-size: 32px;
+    vertical-align: middle;
+    text-align: center;
+}
+
+.loading p .progress_num {
+    padding-left: 20px;
+}
+.rotate {
+  -webkit-animation: rotate 5s linear infinite;
+}
+@-webkit-keyframes rotate {
+  from {
+      -webkit-transform: rotateZ(0);
+  }
+  to {
+      -webkit-transform: rotateZ(360deg);
+  }
+}
+
+
+.audio_handle {
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  right: 20px;
+  top: 20px;
+  background: url(../images/audio_icon.png) no-repeat;
+  background-size: 100%;
+  z-index: 1000;
+  cursor: pointer;
+}
+
+.place_wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.item .content {
+  position: relative;
+  width: 100%;
+  height: 1217px;
+  overflow: hidden;
+}
+
+
+/* index */
+.item_index .content {
+  background: url(../images/index/bg.png) no-repeat;
+  background-size: 100% 100%;
+}
+.item_index  .meteor_1 {
+  /* left: 54px; */
+  left: -100px;
+  top: 38px;
+  width: 76px;
+  height: 46px;
+  background: url(../images/index/meteor_1.png) no-repeat;
+  background-size: 100% 100%;
+  -webkit-animation: meteor_move 3s ease-in infinite;
+}
+.item_index  .meteor_2 {
+  /* left: 310px; */
+  left: -100px;
+  top: 136px;
+  width: 84px;
+  height: 52px;
+  background: url(../images/index/meteor2.png) no-repeat;
+  background-size: 100% 100%;
+  -webkit-animation: meteor_move 2.8s ease .5s infinite;
+}
+.item_index  .meteor_3 {
+  /* left: 118px; */
+  left: -170px;
+  top: 200px;
+  width: 166px;
+  height: 100px;
+  background: url(../images/index/meteor3.png) no-repeat;
+  background-size: 100% 100%;
+  -webkit-animation: meteor_move 2.2s ease-in .3s infinite;
+}
+.item_index  .meteor_4 {
+  /* left: 150px; */
+  left: -70px;
+  top: 340px;
+  width: 66px;
+  height: 40px;
+  background: url(../images/index/meteor4.png) no-repeat;
+  background-size: 100% 100%;
+  -webkit-animation: meteor_move 2.7s ease-in infinite;
+}
+.item_index  .meteor_5 {
+  /* left: 596px; */
+  left: -110px;
+  top: 146px;
+  width: 102px;
+  height: 62px;
+  background: url(../images/index/meteor5.png) no-repeat;
+  background-size: 100% 100%;
+  -webkit-animation: meteor_move 2.9s ease-in infinite;
+}
+.item_index  .meteor_6 {
+  /* left: 506px; */
+  left: -130px;
+  top: 284px;
+  width: 124px;
+  height: 76px;
+  background: url(../images/index/meteor6.png) no-repeat;
+  background-size: 100% 100%;
+  -webkit-animation: meteor_move 2.5s ease-in infinite;
+}
+.item_index  .meteor_7 {
+  /* left: 400px; */
+  left: -130px;
+  top: 448px;
+  width: 124px;
+  height: 76px;
+  background: url(../images/index/meteor7.png) no-repeat;
+  background-size: 100% 100%;
+  -webkit-animation: meteor_move 3s ease-in infinite;
+}
+.item_index .qixi {
+  z-index: 2;
+  left: 282px;
+  top: 100px;
+  width: 104px;
+  height: 212px;
+  opacity: 0;
+  background: url(../images/index/qixi.png) no-repeat;
+  background-size: 100% 100%;
+  -webkit-animation: fadeInDown .8s ease-in .6s forwards;
+
+  
+}
+.item_index .feel_text {
+  z-index: 2;
+  right: 312px;
+  top: 212px;
+  width: 36px;
+  height: 181px;
+  opacity: 0;
+  background: url(../images/index/feel_text.png) no-repeat;
+  background-size: 100% 100%;
+  -webkit-animation: bounceInRight .8s ease-in 1s forwards;
+
+  
+}
+.item_index .date {
+  left: 358px;
+  top: 314px;
+  width: 30px;
+  height: 75px;
+  opacity: 0;
+  background: url(../images/index/date.png) no-repeat;
+  background-size: 100% 100%;
+  -webkit-animation: zoomInLeft .4s ease-in 1.2s forwards;
+
+}
+.item_index .moon {
+  z-index: 2;
+  left: 0;
+  right: 0;
+  margin: auto;
+  top: 450px;
+  width: 548px;
+  height: 568px;
+  opacity: 0;
+  background: url(../images/index/moon.png) no-repeat;
+  background-size: 100% 100%;
+  -webkit-animation: bounceInUp .8s ease 1.4s forwards;
+  z-index: 2;
+}
+.item_index .people {
+  opacity: 0;
+  right: 260px;
+  bottom: 400px;
+  width: 276px;
+  height: 230px;
+  background: url(../images/index/people.png) no-repeat;
+  background-size: 100% 100%;
+  -webkit-animation: fadeInUp .5s ease 2.2s forwards;
+
+}
+.item_index .place_bg {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 750px;
+  height: 293px;
+  background: url(../images/index/place_bg.png) no-repeat;
+  background-size: 100% 100%;
+  z-index: 2;
+}
+.item_index .text {
+  left: 0;
+  right: 0;
+  opacity: 0;
+  margin: auto;
+  bottom: 184px;
+  width: 388px;
+  height: 36px;
+  background: url(../images/index/text.png) no-repeat;
+  background-size: 100% 100%;
+  z-index: 3;
+  -webkit-animation: rubberBand .8s ease 2.5s forwards;
+}
+.item_index .button {
+  opacity: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  bottom: 74px;
+  width: 462px;
+  height: 94px;
+  background: url(../images/index/button.png) no-repeat;
+  background-size: 100% 100%;
+  z-index: 3;
+  -webkit-animation: rotateInUpLeft .8s ease 3.0s forwards;
+}
+
+
+.item_game .content {
+  background: url(../images/game/bg.png) no-repeat;
+  background-size: 100% 100%;
+}
+.item_game .rule {
+  opacity: 0;
+  position: absolute;
+  z-index: 102;
+  left: 0;
+  right: 0;
+  top: 270px;
+  /* bottom: 0; */
+  margin: auto;
+  width: 522px;
+  height: 738px;
+  background: url(../images/game/rule.png) no-repeat;
+  background-size: 100% 100%;
+}
+.item_game .rule.rule_animation {
+  -webkit-animation: zoomIn .8s ease .5s forwards;
+}
+.item_game .start {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  right: 0;
+  margin: auto;
+  bottom: 130px;
+  width: 416px;
+  height: 86px;
+}
+
+.item_game .ready {
+  display: none;
+  position: absolute;
+  z-index: 103;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, .43);
+}
+
+.item_game .common_time_img {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  opacity: 0;
+}
+.common_time_3 {
+  width: 210px;
+  height: 328px;
+}
+.common_time_2 {
+  width: 208px;
+  height: 324px;
+}
+.common_time_1 {
+  width: 118px;
+  height: 328px;
+}
+.common_time_3.common_time_animatin {
+  -webkit-animation: zoomOut 1s ease forwards; 
+}
+.common_time_2.common_time_animatin {
+  -webkit-animation: zoomOut 1s ease 1s forwards; 
+}
+.common_time_1.common_time_animatin {
+  -webkit-animation: zoomOut 1s ease 2s forwards; 
+}
+.item_game .game_meteor_1 {
+  transform: translate(-820px,-480px);
+  left: 750px;
+  top: 445px;
+  animation: game_meteor_move 2.2s ease .3s infinite; 
+}
+.item_game .game_meteor_2 {
+  transform: translate(-710px,-420px);
+  left: 750px;
+  top: 370px;
+  animation: game_meteor_move 3s ease .3s infinite; 
+}
+.item_game .game_meteor_3 {
+  transform: translate(-910px,-550px);
+  left: 750px;
+  top: 540px;
+  animation: game_meteor_move 2s ease infinite; 
+}
+.item_game .game_meteor_4 {
+  transform: translate(-460px,-260px);
+  left: 750px;
+  top: 180px;
+  animation: game_meteor_move 3s ease .4s infinite; 
+}
+.item_game .game_meteor_5 {
+  transform: translate(-720px,-450px);
+  left: 750px;
+  top: 356px;
+  animation: game_meteor_move 3s ease .4s infinite; 
+}
+.item_game .point_1 {
+  width: 2px;
+  height: 2px;
+  position: absolute;
+  bottom: -24px;
+  background: url(../images/game/point_1.png) no-repeat;
+  background-size: 100% 100%;
+  animation: point_move 8s ease infinite; 
+
+}
+.item_game .point_2 {
+  width: 4px;
+  height: 4px;
+  position: absolute;
+  bottom: -24px;
+  background: url(../images/game/point_2.png) no-repeat;
+  background-size: 100% 100%;
+  animation: point_move 8s ease infinite; 
+}
+.item_game .point_3 {
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  bottom: -24px;
+  background: url(../images/game/point_3.png) no-repeat;
+  background-size: 100% 100%;
+  animation: point_move 8s ease infinite; 
+}
+.item_game .point_4 {
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  bottom: -24px;
+  background: url(../images/game/point_4.png) no-repeat;
+  background-size: 100% 100%;
+  animation: point_move 8s ease infinite; 
+}
+.item_game .select {
+  display: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 270px;
+  margin: auto;
+  z-index: 102;
+  width: 522px;
+  height: 738px;
+  background: url(../images/game/select.png) no-repeat;
+  background-size: 100% 100%;
+}
+.item_game .count, .item_game .money {
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  color: #a17aa0;
+  font-size: 46px;
+  font-weight: bold;
+}
+.item_game .count {
+  top: 94px;
+  left: 272px;
+  width: 102px;
+}
+.item_game .money {
+  left: 222px;
+  top: 156px;
+  width: 84px;
+}
+.item_game .final_bonus .count {
+  top: 320px;
+  left: 272px;
+}
+.item_game .final_bonus .money {
+  top: 382px;
+  left: 220px;
+}
+.item_game .receive_bonus, .item_game .receive_gift, .item_game .again_btn, .item_game .common_receive_btn {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 416px;
+  height: 86px;
+}
+.item_game .receive_bonus {
+  top: 212px;
+}
+.item_game .receive_gift {
+  bottom: 132px;
+}
+.item_game .again {
+  display: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 324px;
+  margin: auto;
+  z-index: 102;
+  width: 522px;
+  height: 614px;
+  background: url(../images/game/again.png) no-repeat;
+  background-size: 100% 100%;
+}
+.item_game .again_btn, .item_game .common_receive_btn {
+  bottom: 64px;
+}
+.item_game .common_result {
+  /* display: none; */
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 280px;
+  margin: auto;
+  z-index: 102;
+  width: 522px;
+  height: 614px;
+  
+}
+.item_game .final_bonus {
+  display: none;
+  background: url(../images/game/final_bonus.png) no-repeat;
+  background-size: 100% 100%;
+}
+.item_game .anbaodi {
+  display: none;
+  background: url(../images/game/anbaodi.png) no-repeat;
+  background-size: 100% 100%;
+}
+.item_game .huazhuang {
+  display: none;
+  background: url(../images/game/huazhuang.png) no-repeat;
+  background-size: 100% 100%;
+}
+.item_game .xiaoheiz {
+  display: none;
+  background: url(../images/game/xiaoheiz.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.gameContainer {
+  position: relative;
+  z-index: 101;
+  width: 100%;
+  height: 100%;
+}
+/* .text {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  font-size: 30px;
+  z-index: 999;
+  color: #000;
+}
+.restart {
+  position: absolute;
+  left: 0;
+  bottom: 50px;
+  font-size: 30px;
+  z-index: 999;
+  color: #000;
+  width: 150px;
+} */
+
+.count_time {
+  position: absolute;
+  z-index: 99;
+  left: 32px;
+  top: 36px;
+  font-size: 0;
+}
+.rect {
+  display: inline-block;
+  width: 52px;
+  height: 70px;
+  line-height: 70px;
+  text-align: center;
+  font-size: 50px;
+  color: #fff;
+}
+.sm_rect {
+  width: 24px;
+}
+.canvas {
+  position: absolute;
+  z-index: 99;
+  right: 0;
+  bottom: 72px;
+  width: 250px;
+  height: 134px;
+}
+.heart_progress {
+  position: absolute;
+  z-index: 100;
+  right: 0;
+  bottom: 0;
+  width: 250px;
+  height: 250px;
+  background: url(../images/game/heart_progress.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+
+@-webkit-keyframes bounceInUp {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 3000px, 0);
+    transform: translate3d(0, 3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -20px, 0);
+    transform: translate3d(0, -20px, 0);
+  }
+
+  75% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+
+  90% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, -5px, 0);
+    transform: translate3d(0, -5px, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@-webkit-keyframes bounceInRight {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(3000px, 0, 0);
+    transform: translate3d(3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translate3d(-25px, 0, 0);
+    transform: translate3d(-25px, 0, 0);
+  }
+
+  75% {
+    opacity: 1;
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+
+  90% {
+    opacity: 1;
+    -webkit-transform: translate3d(-5px, 0, 0);
+    transform: translate3d(-5px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes meteor_move {
+  from {
+      opacity: 0.5;
+      transform: translate(-100px,0) scale(1.8);
+  }
+  to {
+      opacity: 1;
+      transform: translate(1000px,330px) scale(0);
+  }
+}
+@-webkit-keyframes zoomInLeft {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@-webkit-keyframes fadeInUp {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes rubberBand {
+  from {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    transform: scale3d(.95, 1.05, 1);
+  }
+
+  75% {
+    transform: scale3d(1.05, .95, 1);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes rotateInUpLeft {
+  from {
+    opacity: 1;
+    transform-origin: left bottom;
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+    transform-origin: left bottom;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes zoomOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+}
+
+
+@keyframes point_move {
+  from {
+      opacity: 1;
+      transform: translate(0,0) scale(1.1);
+  }
+  to {
+      opacity: 0.7;
+      transform: translate(0,-1000px) scale(0.9);
+  }
+}
+
+/* @keyframes game_meteor_move {
+  from {
+      opacity: 0.5;
+      transform: translate(0,0) scale(1.2);
+  }
+  to {
+      opacity: 1;
+      transform: translate(400px,330px) scale(0);
+  }
+} */
+
+@keyframes game_meteor_move {
+
+  to {
+      opacity: 1;
+      transform: translate(0,0) scale(1.2);
+  }
+}
+
+
+
+
+

mobile/templates/default/festival/TanabataFestival/index.html

@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi">
+  <meta name="format-detection" content="telephone=no">
+  <script type="text/javascript">
+    document.addEventListener("WeixinJSBridgeReady", function () {
+      audioAutoPlay('Jaudio');//给个全局函数
+    }, false);
+    document.addEventListener('YixinJSBridgeReady', function () {
+      audioAutoPlay('Jaudio');//给个全局函数
+    }, false);
+    function audioAutoPlay(id) {//全局控制播放函数
+      var audio = document.getElementById(id),
+        play = function () {
+          audio.play();
+          document.removeEventListener("touchstart", play, false);
+        };
+      audio.play();
+      document.addEventListener("touchstart", play, false);
+    }
+    var isAppInside = /micromessenger/i.test(navigator.userAgent.toLowerCase()) || /yixin/i.test(navigator.userAgent.toLowerCase());
+    if (!isAppInside) {//给非微信易信浏览器
+      audioAutoPlay();
+    }
+  </script>
+  <title>七夕节</title>
+  <link rel="stylesheet" href="./css/style.css">
+  <script src="./js/hilo-standalone.min.js"></script>
+</head>
+
+<body>
+  <div class="maincontent">
+    <div class="loading_page">
+      <div class="loading">
+        <p>加载中...
+          <span class="progress_num">0</span>%</p>
+      </div>
+    </div>
+    <audio src="./mp3/bg.mp3" id="Jaudio" autoplay preload loop="loop"></audio>
+    <div id="speaker_handle" class="audio_handle rotate"></div>
+    <div class="wrap">
+      <div class="item item_index">
+        <div class="place_wrap">
+          <div class="content">
+            <div class="meteor_1 position_a"></div>
+            <div class="meteor_2 position_a"></div>
+            <div class="meteor_3 position_a"></div>
+            <div class="meteor_4 position_a"></div>
+            <div class="meteor_5 position_a"></div>
+            <div class="meteor_6 position_a"></div>
+            <div class="meteor_7 position_a"></div>
+            <div class="qixi position_a"></div>
+            <div class="feel_text position_a"></div>
+            <div class="date position_a"></div>
+            <div class="moon position_a"></div>
+            <div class="people position_a"></div>
+            <div class="place_bg position_a"></div>
+            <div class="text position_a"></div>
+            <div class="button position_a"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="item item_game">
+        <div class="place_wrap">
+          <div class="content">
+            <div class="rule">
+              <div class="start"></div>
+            </div>
+            <div class="ready">
+              <img class="common_time_img common_time_3" src="./images/game/3.png" alt="">
+              <img class="common_time_img common_time_2" src="./images/game/2.png" alt="">
+              <img class="common_time_img common_time_1" src="./images/game/1.png" alt="">
+            </div>
+            <div class="count_time">
+              <span class="rect border1">0</span>
+              <span class="rect border1 ml6">0</span>
+              <span class="rect sm_rect">:</span>
+              <span class="rect border1" id="minutes">2</span>
+              <span class="rect border1 ml6" id="seconds">0</span>
+            </div>
+            <img class="game_meteor_1 position_a" src="./images/game/game_meteor_1.png" alt="">
+            <img class="game_meteor_2 position_a" src="./images/game/game_meteor_2.png" alt="">
+            <img class="game_meteor_3 position_a" src="./images/game/game_meteor_3.png" alt="">
+            <img class="game_meteor_4 position_a" src="./images/game/game_meteor_4.png" alt="">
+            <img class="game_meteor_5 position_a" src="./images/game/game_meteor_5.png" alt="">
+            <div class="points"> </div>
+            <div id="gameContainer" class="gameContainer"></div>
+            <div class="heart_progress"></div>
+            <canvas id="c" class="canvas"></canvas>
+            <div class="select" id="select">
+              <div class="count position_a" id="countText"></div>
+              <div class="money position_a" id="money"></div>
+              <a href="#" class="receive_bonus"></a>
+              <div class="receive_gift"></div>
+            </div>
+            <div class="again">
+              <div class="again_btn"></div>
+            </div>
+            <div class="common_result final_bonus" id="finalBonus">
+              <div class="count position_a" id="finalCount"></div>
+              <div class="money position_a" id="finalMoney"></div>
+              <a href="#" class="common_receive_btn"></a>
+            </div>
+            <div class="common_result anbaodi">
+            </div>
+            <div class="common_result huazhuang">
+            </div>
+            <div class="common_result xiaoheiz">
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+
+<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
+<script type="text/javascript" src="./js/wechatshare.js"></script>
+<script src="./js/new_bridge.js"></script>
+<script src="./js/jquery-1.11.0.min.js"></script>
+<script type="text/javascript" src="./js/iSlider.js"></script>
+<script src="./js/point.js"></script>
+<script src="./js/game.js"></script>
+<script src="./js/draw.js"></script>
+
+<script>
+  var isShare = false;
+  var removeDefault = function (e) {
+    e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
+  };
+  // $.ajax({
+  //   url: '',
+  //   success: function(data) {
+  //     console.log(data);
+  //   }
+  // });
+
+  document.body.addEventListener('touchmove', removeDefault, { passive: false }); //passive 参数不能省略，用来兼容ios和android
+  document.getElementById('speaker_handle').addEventListener('click', function () {
+        if ($(this).hasClass('rotate')) {
+            document.getElementById('Jaudio').pause();
+        }
+        else {
+            audioAutoPlay('Jaudio');
+        }
+        $(this).toggleClass('rotate');
+    });
+  var loadImages = [
+    './images/index/bg.png',
+    './images/index/button.png',
+    './images/index/date.png',
+    './images/index/feel_text.png',
+    './images/index/meteor2.png',
+    './images/index/meteor3.png',
+    './images/index/meteor4.png',
+    './images/index/meteor5.png',
+    './images/index/meteor6.png',
+    './images/index/meteor7.png',
+    './images/index/meteor_1.png',
+    './images/index/moon.png',
+    './images/index/people.png',
+    './images/index/place_bg.png',
+    './images/index/qixi.png',
+    './images/index/text.png',
+    './images/game/1.png',
+    './images/game/2.png',
+    './images/game/3.png',
+    './images/game/again.png',
+    './images/game/anbaodi.png',
+    './images/game/bg.png',
+    './images/game/final_bonus.png',
+    './images/game/game_meteor_1.png',
+    './images/game/game_meteor_2.png',
+    './images/game/game_meteor_3.png',
+    './images/game/game_meteor_4.png',
+    './images/game/game_meteor_5.png',
+    './images/game/heart1.png',
+    './images/game/heart_progress.png',
+    './images/game/huazhuang.png',
+    './images/game/point_1.png',
+    './images/game/point_2.png',
+    './images/game/point_3.png',
+    './images/game/point_4.png',
+    './images/game/rule.png',
+    './images/game/select.png',
+    './images/game/xiaoheiz.png'
+  ];
+  var myslider = new iSlider({
+    wrap: '.wrap',
+    item: '.item',
+    lastLocate: false,
+    loadingImgs: loadImages,
+    noslide: [0, 1],
+    onloading: function (data) {
+      var loadImg = loadImages.length;
+      if (loadImg <= 0) {
+        $('.loading_page').hide();
+        return;
+      }
+      var progress = data;
+      var progress_num = parseInt(progress / loadImg * 100);
+      if (progress_num > 100) {
+        progress_num = 100;
+      }
+      setTimeout(function () {
+        $('.progress_num').text(progress_num);
+      }, 200);
+      if (progress_num >= 100) {
+        setTimeout(function () {
+          $('.loading_page').hide();
+        }, 500);
+      }
+    },
+    onslide: function (index) {
+      var game;
+      if (index == 0) {
+        $('.item_index .button').on('click', function () {
+          myslider.next();
+        });
+      }
+      else if (index == 1) {
+        new Point();
+        $('.item_game .rule').addClass('rule_animation');
+        $('.item_game .start').on('click', function () {
+          gameAnimation();
+        });
+        $('.common_time_1').on('webkitAnimationEnd', function () {
+          $('.item_game .ready').fadeOut('fast');
+          $('.item_game .common_time_img').removeClass('common_time_animatin');
+          if (game) {
+            game.restart();
+          }
+          else {
+            game = new Game();
+          }
+        });
+
+        $('.item_game .receive_gift').on('click', function () {
+          $('.item_game .select').fadeOut();
+
+          // 调起登录， 分享 , again 显示
+          $('.item_game .again').fadeIn();
+
+        });
+
+        $('.item_game .again_btn').on('click', function () {
+          $('.item_game .again').fadeOut();
+          isShare = true;
+          gameAnimation();
+        });
+
+        function gameAnimation() {
+          $('.item_game .rule').fadeOut('fast');
+          $('.item_game .ready').fadeIn('fast');
+          $('#speaker_handle').fadeIn('fast');
+          $('#Jaudio').attr('src', './mp3/game.mp3');
+          $('.item_game .common_time_img').addClass('common_time_animatin');
+        }
+      }
+    }
+  });
+</script>
+
+
+</html>

mobile/templates/default/festival/TanabataFestival/js/draw.js

@@ -0,0 +1,95 @@
+function Draw() {
+  this.canvas = document.getElementById('c');
+  this.ctx = this.canvas.getContext('2d');
+  this.rangeValue = 0;
+  this.nowRange = 0;
+  this.mW = this.canvas.width = 250;
+  this.mH = this.canvas.height = 134;
+  this.lineWidth = 2;
+  this.r = this.mH / 2;
+  this.cR = this.r - 16 * this.lineWidth;
+
+  this.sX = 0;
+  this.sY = this.mH / 2;
+  this.axisLength = this.mW;
+  this.waveWidth = 0.015;
+  this.waveHeight = 6;
+  this.speed = 0.09;
+  this.xOffset = 0;
+
+  this.ctx.lineWidth = this.lineWidth;
+  this.IsdrawCircled = false;
+  this.render();
+}
+
+Draw.prototype = {
+  drawCircle: function () {
+    this.ctx.beginPath();
+    this.ctx.strokeStyle = 'transprant';
+    this.ctx.arc(this.r, this.r, this.cR + 5, 0, 2 * Math.PI);
+    this.ctx.stroke();
+    this.ctx.beginPath();
+    this.ctx.arc(this.r, this.r, this.cR, 0, 2 * Math.PI);
+    this.ctx.clip();
+  },
+
+  drawSin: function () {
+    this.ctx.save();
+    var points = [];
+
+    this.ctx.beginPath();
+    for (var x = this.sX; x < this.sX + this.axisLength; x += 20 / this.axisLength) {
+      var y = -Math.sin((this.sX + x) * this.waveWidth + this.xOffset);
+      var dY = this.mH * (1 - this.nowRange / 100);
+      points.push([x, dY + y * this.waveHeight]);
+      this.ctx.lineTo(x, dY + y * this.waveHeight);
+    }
+
+    this.ctx.lineTo(this.axisLength, this.mH);
+    this.ctx.lineTo(this.sX, this.mH);
+    this.ctx.lineTo(points[0][0], points[0][1]);
+    var my_gradient=this.ctx.createLinearGradient(0,0,0,134);
+    my_gradient.addColorStop(0,"#e0cde3");
+    my_gradient.addColorStop(1,"#f3edf5");
+    this.ctx.fillStyle = my_gradient;
+    this.ctx.fill();
+    this.ctx.restore();
+  },
+
+  drawText: function () {
+    this.ctx.save();
+    var size = 0.4 * this.cR;
+    this.ctx.font = "30px 'PingFang SC Light'";
+    this.ctx.textAlign = 'center';
+    this.ctx.fillStyle = '#fff';
+    this.ctx.fillText(~~this.nowRange + '%', this.r + 70, this.r + size / 2);
+    this.ctx.restore();
+  },
+
+  render: function () {
+    // this.rangeValue = rangeValue;
+    this.ctx.clearRect(0, 0, this.mW, this.mH);
+    if (this.IsdrawCircled == false) {
+      // this.drawCircle();
+    }
+
+    if (this.nowRange <= this.rangeValue) {
+      var tmp = 1;
+      this.nowRange += tmp;
+    }
+    if (this.nowRange > this.rangeValue) {
+      var tmp = 1;
+      this.nowRange -= tmp;
+    }
+    this.drawSin(this.xOffset);
+    this.drawText();
+    this.xOffset += this.speed;
+    requestAnimationFrame(this.render.bind(this));
+  },
+  setValue: function(value) {
+    this.rangeValue = value;
+  }
+
+
+
+}

mobile/templates/default/festival/TanabataFestival/js/game.js

@@ -0,0 +1,184 @@
+function Game() {
+  this.fCode = ['anbaodi', 'huazhuang', 'xiaoheiz'];
+  this.renderType = 'canvas';
+  this.gameContainer = document.getElementById('gameContainer');
+  this.text = document.getElementById('text');
+  this.minutes = document.getElementById('minutes');
+  this.seconds = document.getElementById('seconds');
+  this.finalBonus = document.getElementById('finalBonus');
+  this.select = document.getElementById('select');
+  this.countText = document.getElementById('countText');
+  this.money = document.getElementById('money');
+  this.finalCount = document.getElementById('finalCount');
+  this.finalMoney = document.getElementById('finalMoney');
+  this.moneyText = 0;
+  this.w = 750;
+  this.h = 1217;
+  this.averageN = Math.floor(this.w / 94) - 2;
+  this.averageW = this.w / this.averageN;
+  this.stage = null;
+  this.ticker = null;
+  this.Tween = null;
+  this.Ease = null;
+  this.count = 0;
+  this.times = 20;
+  this.gameContainer.style.height = this.h + 'px';
+  this.draw = new Draw();
+  this.init();
+  this.start();
+  this.draw.setValue(0);
+}
+
+Game.prototype = {
+  init: function () {
+    var _this = this;
+    this.stage = new Hilo.Stage({
+      renderType: this.renderType,
+      container: this.gameContainer,
+      width: this.w,
+      height: this.h
+    });
+    this.stage.enableDOMEvent(Hilo.event.POINTER_START, true);
+    this.ticker = new Hilo.Ticker(60);
+    this.Tween = Hilo.Tween;
+    this.Ease = Hilo.Ease;
+    this.ticker.addTick(this.stage);
+    this.ticker.addTick(this.Tween);
+    this.ticker.interval(function () {
+      _this.times--;
+      _this.countTimesText();
+      if (_this.times <= 0) {
+        _this.finalResult();
+        $('#speaker_handle').fadeOut('fast');
+        $('#Jaudio').attr('src', '');
+        // _this.caclBonus();
+        // _this.select.style.display = 'block';
+        _this.ticker.stop();
+      }
+    }, 1000);
+    this.ticker.start();
+  },
+  start: function () {
+    var _this = this;
+    for (var i = 0; i < this.averageN; i++) {
+      var minP = this.averageW * i + 47;
+      var maxP = this.averageW * (i + 1) - 47;
+      var x = Math.round(Math.random() * (maxP - minP) + minP);
+      (function (j, x) {
+        setTimeout(function () {
+          _this.create(x);
+        }, j * 80);
+      })(i, x);
+    }
+  },
+  create: function (x) {
+    var _this = this;
+    var heartSpeed = (Math.random() * 5 + 8).toFixed(2);
+    var left = x || Math.round(Math.random() * (this.w - 94) + 47);
+    var heart0 = new Hilo.Bitmap({
+      image: '../images/game/heart1.png',
+      rect: [0, 0, 94, 80],
+      x: left,
+      y: _this.h,
+      scaleX: 1,
+      scaleY: 1,
+      pivotX: 47,
+      pivotY: 40,
+      onUpdate: function () {
+        this.y -= this.speed;
+        if (this.y < 0) {
+          this.removeFromParent();
+          setTimeout(function () {
+            _this.create();
+          }, 100);
+
+        }
+      },
+    }).addTo(_this.stage);
+    heart0.on(Hilo.event.POINTER_START, function (e) {
+      var self = this;
+      _this.Tween.to(this, {
+        scaleX: 1.4,
+        scaleY: 1.4,
+        alpha: .7
+      }, {
+          duration: 300,
+          ease: _this.Ease.Bounce.EaseIn,
+          onComplete: function () {
+            console.log('complete');
+            self.removeFromParent();
+            _this.count++;
+            // _this.text.innerHTML = _this.count;
+            _this.calcScore();
+            setTimeout(function () {
+              _this.create();
+            }, 100)
+          }
+        });
+    }, false);
+    heart0.speed = heartSpeed;
+  },
+  countTimesText: function() {
+    var times = this.times >= 10 ? this.times.toString() : '0' + this.times;
+    var arr = times.split('');
+    this.minutes.innerHTML = arr[0];
+    this.seconds.innerHTML = arr[1];
+  },
+  calcScore: function() {
+    var score = 0;
+    if(isShare) {
+      score = this.count * 2 > 70 ? 70 : this.count * 2;
+    }
+    score = this.count * 2 > 100 ? 100 : this.count * 2;
+    if(!score)return;
+    if(score < 21) {
+      this.moneyText = 20
+    }
+    else if(score < 41) {
+      this.moneyText = 40
+    }
+    else if(score < 61) {
+      this.moneyText = 60
+    }
+    else if(score < 81) {
+      this.moneyText = 80
+    }
+    else {
+      this.moneyText = 100
+    }
+    this.draw.setValue(score);
+  },
+  caclBonus: function() {
+    this.countText.innerHTML = this.finalCount.innerHTML = this.count;
+    this.money.innerHTML = this.finalMoney.innerHTML = this.moneyText;
+  },
+  restart: function() {
+    this.gameContainer.innerHTML = '';
+    this.times = 20;
+    this.countTimesText();
+    this.init();
+    this.start();
+  },
+  finalResult: function() {
+    this.caclBonus();
+    
+    if (this.count == 0) {
+      alert('请点击');
+      return;
+    }
+    if (!isShare) {
+      this.select.style.display = 'block';
+      return;
+    }
+
+    if(this.count < 50) {
+      this.finalBonus.style.display = 'block'
+    }
+    else {
+      var el = this.fCode[Math.round(Math.random()*2)];
+      $('.' + el).fadeIn('fast');
+      console.log(el);
+    }
+    console.log(this.count);
+  }
+}

mobile/templates/default/festival/TanabataFestival/js/iSlider.js

@@ -0,0 +1,567 @@
+
+/**
+ * iSlider 高性能全屏滑动组件 
+ * @class iSlider
+ * @param {object} opts
+ * @param {string} opts.wrap='.wrap' 容器 
+ * @param {string} opts.item='.item'  滚动单元的元素
+ * @param {string} opts.playClass='play'  触发播放动画的class
+ * @param {number} [opts.index=0]  设置初始显示的页码
+ * @param {array} [opts.noslide=[]]  设置禁止滑动的页面序号(0开始), 禁止后 需要开发者手动绑定页面中的某个按钮事件进行滑动 
+ * @param {number} [opts.speed=400] 动画速度 单位:ms
+ * @param {number} [opts.triggerDist=30] 触发滑动的手指移动最小位移 单位:像素
+ * @param {boolean} [opts.isVertical=true] 是否是垂直滑动 默认是.  设成false为水平滑动.
+ * @param {boolean} [opts.useACC=true] 是否启用硬件加速 默认启用
+ * @param {boolean} [opts.fullScr=true] 是否是全屏的 默认是. 如果是局部滑动,请设为false
+ * @param {boolean} [opts.preventMove=false] 是否阻止系统默认的touchmove移动事件,  默认不阻止, 该参数仅在局部滚动时有效,   如果是局部滚动 如果为true 那么在这个区域滑动的时候 将不会滚动页面.  如果是全屏情况 则会阻止
+ * @param {boolean} [opts.lastLocate=true] 后退后定位到上次浏览的位置 默认true
+ * @param {function} [opts.onslide]  滑动后回调函数  会回传index参数
+ * @param {array} [opts.loadingImgs]  loading需要加载的图片地址列表
+ * @param {function} [opts.onloading]  loading时每加载完成一个图片都会触发这个回调  回调时参数值为 (已加载个数,总数)
+ * @param {number} [opts.loadingOverTime=15]  预加载超时时间 单位:秒
+ * @desc 
+
+-  如丝般高性能全屏动画滑屏组件, 主要应用于微信H5宣传页,海报,推广介绍等场景. 基于iSlider,可以快速搭建效果炫丽的H5滑屏页面.
+-  简洁,易用.  无css依赖.
+-  专注于页面滑动, 没有冗余代码 , 保证性能.
+-  组件没有任何依赖.
+-  imgcache 引用地址 : http://imgcache.gtimg.cn/music/h5/lib/js/module/iSlider-1.0.min.js?_bid=363&max_age=2592000
+-  github: https://github.com/kele527/iSlider
+
+
+ * @example
+
+    //极简用法
+    new iSlider(); //容器默认是 .wrap  元素默认是 .item   动画播放class默认是 play
+
+    //普通用法
+    new iSlider({
+        wrap:'.wrap',
+        item:'.item',
+        playClass:'play',
+        onslide:function (index) {
+            console.info(index)
+        }
+    });
+
+    //带loading进度条用法
+    new iSlider({
+        wrap:'.wrap',
+        item:'.item',
+        playClass:'play',
+        onslide:function (index) {
+            console.info(index)
+        },
+        loadingImgs:[
+            'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/open_cover.jpg?max_age=2592000',
+            'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/im_cover.jpg?max_age=2592000',
+            'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/bg1.jpg?max_age=2592000',
+            'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/bg2.jpg?max_age=2592000'
+        ],
+        onloading:function (loaded,total) {
+            this.$('#loading div').style.width=loaded/total*100+'%';
+            if (loaded==total) {
+                this.$('#loading').style.display="none"
+            }
+        }
+    });
+
+    demo http://kele527.github.io/iSlider/demo1.html
+
+ * @date 2014/11/3 星期一
+ * @author rowanyang
+ * 
+ */
+function iSlider(opts) {
+    this.opts={
+        wrap:'.wrap',
+        item:'.item',
+        playClass:'play',
+        index:0,
+        noslide:[],
+        noslideBack:false, //当noslide生效的时候 是否允许往回滑动  默认不允许, 如果有需要可以开启
+        speed:400, //滑屏速度 单位:ms
+        triggerDist:30,//触发滑动的手指移动最小位移 单位:像素
+        isVertical:true,//垂直滑还是水平滑动
+        useACC:true, //是否启用硬件加速 默认启用
+        fullScr:true, //是否是全屏的 默认是. 如果是局部滑动,请设为false
+        preventMove:false, //是否阻止系统默认的touchmove移动事件,  默认不阻止, 该参数仅在局部滚动时有效,   如果是局部滚动 如果为true 那么在这个区域滑动的时候 将不会滚动页面.  如果是全屏情况 则会阻止
+        lastLocate:true, //后退后定位到上次浏览的位置 默认开启
+        loadingImgs:[], //loading 预加载图片地址列表
+        onslide:function (index) {},//滑动回调 参数是本对象
+        onloading:function (loaded,total) {},
+        loadingOverTime:15 //预加载超时时间 单位:秒
+    }
+
+    for (var i in opts) {
+        this.opts[i]=opts[i];
+    }
+
+    this.SS=false;
+    try {
+        this.SS=sessionStorage;
+        this.SS['spt']=1;//检测是否是ios私密浏览模式 如果是私密模式 这一行会报错 进入到catch
+    }catch (e) {
+        this.SS=0;
+    }
+
+    this.init();
+}
+/**  @lends iSlider */
+iSlider.prototype={
+    wrap:null,
+    index : 0,
+    length:0,
+    _tpl:[],
+    _delayTime:150,
+    _sessionKey : location.host+location.pathname,
+    _prev:null,
+    _current:null,
+    _next:null,
+    $:function (o,p) {
+        return (p||document).querySelector(o);
+    },
+    addClass:function (o,cls) {
+        if (o.classList) {
+            o.classList.add(cls)
+        }else {
+            o.className+=' '+cls;
+        }
+    },
+    removeClass:function (o,cls) {
+        if (o.classList) {
+            o.classList.remove(cls)
+        }else {
+            o.className=o.className.replace(new RegExp('\\s*\\b'+cls+'\\b','g'),'')
+        }
+    },
+	init:function () {
+        var self = this;
+        this.wrap = typeof this.opts.wrap=='string' ? this.$(this.opts.wrap) : this.opts.wrap ;
+
+        if (this.SS) {
+            //使用sessionStorage来保存当前浏览到第几页了   后退回来的时候 定位到这一页
+            this._sessionKey=btoa(encodeURIComponent(this._sessionKey+this.wrap.id+this.wrap.className));
+
+            var lastLocateIndex=parseInt(this.SS[this._sessionKey]);
+            this.index = (this.opts.lastLocate && lastLocateIndex>=0) ? lastLocateIndex : 0;
+        }else {
+            this.index = this.opts.index || 0;
+        }
+        
+
+        if (!this.wrap) {
+            throw Error('"wrap" param can not be empty!');
+            return ;
+        }
+
+        this._tpl = this.wrap.cloneNode(true);
+        this._tpl = this.opts.item ? this._tpl.querySelectorAll(this.opts.item) : this._tpl.children;
+
+        for (var i=0; i<this._tpl.length; i++) {
+            this._tpl[i].style.cssText+='display:block;position:absolute;left:0;top:0;width:100%;height:100%'
+        };
+
+        this.length=this._tpl.length; //总页数数据
+        this.touchInitPos = 0;//手指初始位置
+        this.startPos = 0;//移动开始的位置
+        this.totalDist = 0,//移动的总距离
+        this.deltaX1 = 0;//每次移动的正负
+        this.deltaX2 = 0;//每次移动的正负
+        
+        //全屏滑动 设置样式
+        if (this.opts.fullScr) {
+            var s = document.createElement('style');
+            s.innerHTML = 'html,body{width:100%;height:100%;overflow:hidden}';
+            document.head.appendChild(s);
+            s = null;
+        }
+
+        this.wrap.style.cssText+="display:block;position:relative;"+(this.opts.fullScr ? 'width:100%;height:100%':'');
+        
+        //必须要在前面的布局都设置好后 再来获取尺寸
+        this.displayWidth = this.wrap.clientWidth; //滑动区域最大宽度
+        this.displayHeight = this.wrap.clientHeight; //滑动区域最大高度
+
+        this.scrollDist=this.opts.isVertical ? this.displayHeight : this.displayWidth;//滚动的区域尺寸 
+
+        this._setHTML();// 填充初始DOM
+
+        if (this.opts.loadingImgs && this.opts.loadingImgs.length) {
+            this._loading();
+        }else {
+            this._pageInit();
+        }
+
+        if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
+            this._delayTime=50;
+        }
+
+        this._bindEvt();
+	},
+    _bindEvt:function () {
+        var self = this;
+        var handlrElm= this.opts.fullScr ? this.$('body') : this.wrap;
+        handlrElm.addEventListener('touchstart',function (e) {
+            self._touchstart(e);
+        },false);
+        handlrElm.addEventListener('touchmove',function (e) {
+            self._touchmove(e);
+            if (!self.opts.fullScr) { //修复手Q中局部使用时的一个bug
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        },false);
+        handlrElm.addEventListener('touchend',function (e) {
+            self._touchend(e);
+        },false);
+        handlrElm.addEventListener('touchcancel',function (e) {
+            self._touchend(e);
+        },false);
+
+        if (this.opts.fullScr || this.opts.preventMove) {
+            handlrElm.addEventListener('touchmove', function (e) {e.target.getAttribute('data-stop') !== "true" && e.preventDefault(); }, false);
+        }
+    },
+    _setHTML:function (index) {
+        if (index>=0) {
+            this.index=parseInt(index);
+        }
+        this.wrap.innerHTML='';
+
+        var initDom = document.createDocumentFragment();
+
+        if (this.index>0) {
+            this._prev=this._tpl[this.index-1].cloneNode(true);
+            this._prev.style.cssText+=this._getTransform('-'+this.scrollDist+'px');
+            initDom.appendChild(this._prev)
+        }else {
+            this._prev=null;
+        }
+        this._current =this._tpl[this.index].cloneNode(true);
+
+        this._current.style.cssText+=this._getTransform(0);
+        initDom.appendChild(this._current);
+        
+        if (this.index<this.length-1) {
+            this._next=this._tpl[this.index+1].cloneNode(true);
+            this._next.style.cssText+=this._getTransform(this.scrollDist+'px');
+            initDom.appendChild(this._next)
+        }else {
+            this._next=null;
+        }
+
+        this.wrap.appendChild(initDom);
+
+    },
+    _pageInit:function () {
+        var self = this;
+        setTimeout(function () {
+            self.addClass(self._current,self.opts.playClass);
+
+            try {
+                self.opts.onslide.call(self,self.index);
+            } catch (e) {
+//                console.info(e)
+            }
+        },this._delayTime);
+    },
+	_touchstart : function (e) {
+        var self=this;
+        if(e.target.getAttribute("data-stop") === "true")return;
+		if(e.touches.length !== 1){return;}//如果大于1个手指，则不处理
+        
+        this.lockSlide=false;
+        this._touchstartX=e.touches[0].pageX;
+        this._touchstartY=e.touches[0].pageY;
+
+		this.touchInitPos = this.opts.isVertical ? e.touches[0].pageY:e.touches[0].pageX; // 每次move的触点位置
+		this.deltaX1 = this.touchInitPos;//touchstart的时候的原始位置
+
+		this.startPos = 0;
+		this.startPosPrev = -this.scrollDist;
+		this.startPosNext = this.scrollDist;
+		//手指滑动的时候禁用掉动画
+		if (this._next) {
+			self._next.style.cssText+='-webkit-transition-duration:0;'
+		}
+
+		self._current.style.cssText+='-webkit-transition-duration:0;'
+		if (this._prev) {
+			self._prev.style.cssText+='-webkit-transition-duration:0;'
+		}
+	},
+	_touchmove : function (e) {
+        var parent=e.target;
+        if(parent.getAttribute("stop") === "true")return;
+
+        do {
+            parent=parent.parentNode;
+        } while (parent && parent!=this.wrap);
+ 
+        if (!parent && e.target!=this.wrap ) {
+            return ;
+        }
+
+        var self = this;
+		if(e.touches.length !== 1 || this.lockSlide){return;}
+
+        var gx=Math.abs(e.touches[0].pageX - this._touchstartX);
+        var gy=Math.abs(e.touches[0].pageY - this._touchstartY);
+        
+        //如果手指初始滑动的方向跟页面设置的方向不一致  就不会触发滑动  这个主要是避免误操作, 比如页面是垂直滑动, 在某一页加了横向滑动的局部动画, 那么左右滑动的时候要保证页面不能上下移动. 这里就是做这个的.
+        if (gx>gy && this.opts.isVertical) { //水平滑动
+            this.lockSlide=true;
+            return ;
+        }else if(gx<gy && !this.opts.isVertical){ //垂直滑动
+            this.lockSlide=true;
+            return ;
+        }
+
+        if (this.opts.noslide && this.opts.noslide.indexOf(this.index)>=0) {
+            //noslideBack 默认值是false   默认是禁用滑动后 前后都不能再滑动,
+            //但是当noslideBack为true时, 禁用了这一页的滑动, 那么往下是划不动了  但是可以往上滑
+            if ( !this.opts.noslideBack || (this.opts.isVertical ? (e.touches[0].pageY - this._touchstartY < 0) : (e.touches[0].pageX - this._touchstartX < 0)) ) {
+                return ;
+            }
+        }
+
+
+		var currentX = this.opts.isVertical ? e.touches[0].pageY:e.touches[0].pageX;
+		this.deltaX2 = currentX - this.deltaX1;//记录当次移动的偏移量
+		this.totalDist = this.startPos + currentX - this.touchInitPos;
+
+		self._current.style.cssText+=this._getTransform(this.totalDist+'px');
+		this.startPos = this.totalDist;
+		
+		//处理上一张和下一张
+		if (this.totalDist<0) {//露出下一张
+			if (this._next) {
+				this.totalDist2 = this.startPosNext + currentX - this.touchInitPos;
+				self._next.style.cssText += this._getTransform(this.totalDist2+'px');
+				this.startPosNext = this.totalDist2;
+			}
+		}else {//露出上一张
+			if (this._prev) {
+				this.totalDist2 = this.startPosPrev + currentX - this.touchInitPos;
+				self._prev.style.cssText += this._getTransform(this.totalDist2+'px');
+				this.startPosPrev = this.totalDist2;
+			}
+		}
+
+		this.touchInitPos = currentX;
+	},
+	_touchend : function (e) {
+        if(e.target.getAttribute("stop") === "true")return;
+		if(this.deltaX2 < -this.opts.triggerDist){
+			this.next();
+		}else if(this.deltaX2 > this.opts.triggerDist){
+			this.prev();
+		}else{
+			this._itemReset();
+		}
+		this.deltaX2 = 0;
+	},
+    _getTransform:function (dist) {
+        var pos= this.opts.isVertical? '0,'+dist : dist+',0';
+        return ';-webkit-transform:' + (this.opts.useACC ? 'translate3d('+pos+',0)' : 'translate('+pos+')');
+    },
+
+    _itemReset:function () {
+        var self = this;
+        self._current.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform(0);
+        if (self._prev) {
+            self._prev.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform('-'+this.scrollDist+'px');
+        }
+        if (self._next) {
+           self._next.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform(this.scrollDist+'px');
+        }
+		this.deltaX2 = 0;
+    },
+
+    _loading:function () {
+        var self = this;
+        var imgurls=this.opts.loadingImgs;
+        var fallback=setTimeout(function () {
+            try {
+                self.opts.onloading.call(self,total,total);
+            } catch (e) { }
+            
+            self._pageInit();
+        },this.opts.loadingOverTime*1000);//loading超时时间  万一进度条卡那了 15秒后直接显示
+
+        var imgs=[], loaded=1;
+        var total=imgurls.length+1;
+        for (var i=0; i<imgurls.length; i++) {
+            imgs[i]=new Image();
+            imgs[i].src=imgurls[i];
+            imgs[i].onload=imgs[i].onerror=imgs[i].onabort=function (e) {
+                loaded++;
+                if (this.src === imgurls[0] && e.type === 'load') {
+                    clearTimeout(fallback)
+                }
+                checkloaded();
+                this.onload=this.onerror=this.onabort=null;
+            }
+        }
+
+        try {
+            self.opts.onloading.call(self,1,total);
+        } catch (e) { }
+
+        function checkloaded() {
+            try {
+                self.opts.onloading.call(self,loaded,total);
+            } catch (e) { }
+            if (loaded==total) {
+                if (fallback) {
+                    clearTimeout(fallback)
+                }
+                self._pageInit();
+                imgs=null;
+                if (self.opts.preLoadingImgs && self.opts.preLoadingImgs.length) {
+                    self.preloading();
+                }
+            }
+        }
+    },
+    /** 
+     * 滑动到上一页
+     * @example
+        s1.prev();
+     */
+    prev:function () {
+        var self = this;
+
+        if (!this._current || !this._prev) {
+            this._itemReset();
+            return ;
+        }
+        if (this.index > 0) {
+            this.index--;
+        }else {
+            this._itemReset();
+            return false;
+        }
+
+//        var nextIndex = this.index+1 > this.length-1 ? 0 : this.index+1;
+
+        if (this._next) {
+            this.wrap.removeChild(this._next);
+        }
+
+        this._next=this._current;
+        this._current=this._prev;
+        this._prev=null;
+
+        this._next.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform(this.scrollDist+'px');
+        this._current.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform(0);
+        if (this.SS) {
+            this.SS[this._sessionKey]=this.index;
+        }
+
+        setTimeout(function () {
+
+            if (self.$('.'+self.opts.playClass,self.wrap)) {
+                self.removeClass(self.$('.'+self.opts.playClass,self.wrap),self.opts.playClass)
+            }
+            self.addClass(self._current,self.opts.playClass)
+
+            try {
+                self.opts.onslide.call(self,self.index);
+            } catch (e) {
+//                console.info(e)
+            }
+
+            var prevIndex = self.index-1;
+            if (prevIndex < 0) {
+                prevIndex =  self.length-1;
+                return false;
+            }
+
+            self._prev = self._tpl[prevIndex].cloneNode(true);
+            self._prev.style.cssText+='-webkit-transition-duration:0ms;'+self._getTransform('-'+self.scrollDist+'px');
+            self.wrap.insertBefore(self._prev,self._current);
+
+        },this._delayTime)
+
+    },
+
+    /** 
+     * 滑动到下一页
+     * @example
+        s1.next();
+     */
+    next:function () {
+        var self = this;
+
+        if (!this._current || !this._next) {
+            this._itemReset();
+            return ;
+        }
+
+        if (this.index < this.length-1) {
+            this.index++;
+        }else {
+            this._itemReset();
+            return false;
+        }
+        
+//        var prevIndex = this.index===0 ? this.length-1 : this.index-1;
+
+        if (this._prev) {
+            this.wrap.removeChild(this._prev);
+        }
+
+        this._prev=this._current;
+        this._current=this._next;
+        this._next=null;
+
+        this._prev.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform('-'+this.scrollDist+'px');
+        this._current.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform(0);
+        if (this.SS) {
+            this.SS[this._sessionKey]=this.index;
+        }
+
+        setTimeout(function () {
+            if (self.$('.'+self.opts.playClass,self.wrap)) {
+                self.removeClass(self.$('.'+self.opts.playClass,self.wrap),self.opts.playClass)
+            }
+            self.addClass(self._current,self.opts.playClass)
+
+            try {
+                self.opts.onslide.call(self,self.index);
+            } catch (e) {
+//                console.info(e)
+            }
+
+            var nextIndex = self.index+1;
+            if (nextIndex >= self.length) {
+                return false;
+            }
+
+            self._next = self._tpl[nextIndex].cloneNode(true);
+            self._next.style.cssText+='-webkit-transition-duration:0ms;'+self._getTransform(self.scrollDist+'px');
+            self.wrap.appendChild(self._next);
+
+        },this._delayTime)
+
+    },
+    /** 
+     * 跳转到指定页码
+     * @param {number} index 页码 从0开始的
+     * @example
+        s1.slideTo(3);
+     */
+    slideTo:function (index) {
+        this._setHTML(index);
+        this._pageInit();
+    }
+
+}
+
+if (typeof module == 'object') {
+    module.exports=iSlider;
+}else {
+    window.iSlider=iSlider;
+}

mobile/templates/default/festival/TanabataFestival/js/new_bridge.js

@@ -0,0 +1,117 @@
+var Bridge = function(){
+    var isMobile = {
+        Android: function() {
+            return navigator.userAgent.match(/Android/i);
+        },
+        BlackBerry: function() {
+            return navigator.userAgent.match(/BlackBerry/i);
+        },
+        iOS: function() {
+            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
+        },
+        Opera: function() {
+            return navigator.userAgent.match(/Opera Mini/i);
+        },
+        Windows: function() {
+            return navigator.userAgent.match(/IEMobile/i);
+        },
+        any: function() {
+            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
+        }
+    };
+    function init_ios_bridge(callback)
+    {
+        if (window.WebViewJavascriptBridge) {
+            return callback(WebViewJavascriptBridge);
+        }
+
+        if (window.WVJBCallbacks) {
+            return window.WVJBCallbacks.push(callback);
+        }
+
+        window.WVJBCallbacks = [callback];
+        var WVJBIframe = document.createElement('iframe');
+        WVJBIframe.style.display = 'none';
+        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
+        document.documentElement.appendChild(WVJBIframe);
+        setTimeout(function() {
+            document.documentElement.removeChild(WVJBIframe);
+        }, 0);
+    }
+
+    function init_android_bridge()
+    {
+        if (window.WebViewJavascriptBridge)
+        {
+            WebViewJavascriptBridge.init();
+        }
+        else
+        {
+            document.addEventListener(
+                'WebViewJavascriptBridgeReady'
+                , function() {
+                    WebViewJavascriptBridge.init();},
+                false);
+        }
+    }
+
+    function call_native_handler(handler, data,callback)
+    {
+        if (window.WebViewJavascriptBridge)
+        {
+            window.WebViewJavascriptBridge.callHandler(handler,
+                data,
+                callback);
+        }
+        else
+        {
+            document.addEventListener(
+                'WebViewJavascriptBridgeReady'
+                , function()
+                {
+                    window.WebViewJavascriptBridge.callHandler(
+                        handler,
+                        data,
+                        callback,
+                        false);
+                }
+            );
+        }
+    }
+
+    function register_js_hander(name,callback)
+    {
+        if (window.WebViewJavascriptBridge)
+        {
+            window.WebViewJavascriptBridge.registerHandler(name,
+                callback);
+        }
+        else
+        {
+            document.addEventListener(
+                'WebViewJavascriptBridgeReady'
+                , function()
+                {
+                    window.WebViewJavascriptBridge.registerHandler(name,callback);
+                }
+            );
+        }
+    }
+
+    (function(){
+        if(isMobile.iOS()) {
+            init_ios_bridge(function(bridge) { });
+        } else if (isMobile.Android) {
+            init_android_bridge();
+        } else {
+
+        }
+    })();
+
+    return {
+        call_native_handler:call_native_handler,
+        register_js_hander:register_js_hander,
+        isMobile:isMobile
+    }
+};
+

mobile/templates/default/festival/TanabataFestival/js/point.js

@@ -0,0 +1,31 @@
+
+function Point() {
+  this.el = $('.item_game .points');
+  this.classNames = ['point_1', 'point_2', 'point_3', 'point_4'];
+  this.html = '';
+
+  for(var i = 0; i < 20; i++) {
+    this.html += this.create(i);
+  }
+  this.el.html(this.html);
+}
+
+Point.prototype = {
+  getRandom: function(min, max) {
+    return Math.round(Math.random() * (max - min) + min);
+  },
+  randomLeft: function() {
+    return this.getRandom(260, 420);
+  },
+  randomIndex: function() {
+    return this.getRandom(0, 3);
+  },
+  create: function(i) {
+    var left = "left: " + this.randomLeft() + "px";
+    var delay = "animation-delay:" + (i * 0.5).toFixed(2) + "s" ;
+    var style = left + ";" + delay;
+    var str = '<div class="' + this.classNames[this.randomIndex()] +  '" style="' + style + '"></div>'
+    return str;
+  }
+}
+

mobile/templates/default/festival/TanabataFestival/js/wechatshare.js

@@ -0,0 +1,61 @@
+var weiXinShare = {
+  init: function (e) {
+    var n = window.location.href;
+    n = encodeURIComponent(n);
+    var t = window.location.protocol + "//" + window.location.host + "/mobile/index.php?act=mshop&op=signurl&client_type=ajax&sign_url=" + n + "&callback=";
+    this.getJSONP(t, function (e) {
+      var n = e.datas, t = n.timestamp, i = n.noncestr, o = n.signature, a = n.appid;
+      wx.config({
+        debug: !1,
+        appId: a,
+        timestamp: t,
+        nonceStr: i,
+        signature: o,
+        jsApiList: ["checkJsApi", "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "onMenuShareQZone", "getNetworkType", "hideOptionMenu", "showOptionMenu", "chooseWXPay"]
+      })
+    }), this.ready(e)
+  }, getJSONP: function (e, n) {
+    var t = "callback" + +new Date, i = document.createElement("script");
+    i.type = "text/javascript", i.charset = "UTF-8", i.src = e + t, heads = document.head || document.getElementsByTagName("head")[0];
+    var o = heads.appendChild(i);
+    setTimeout(function () {
+      window[t] = function (e) {
+        try {
+          i.onload = i.onreadystatechange = function () {
+            n && n(e)
+          }
+        } catch (e) {
+        } finally {
+          setTimeout(function () {
+            heads && i.parentNode && o.parentNode.removeChild(o), window[t] = null
+          }, 3e3)
+        }
+      }
+    }, 0)
+  }, ready: function (e) {
+    wx.ready(function () {
+      wx.onMenuShareTimeline({
+        title: e.title, desc: e.desc, link: e.link, imgUrl: e.imgUrl, trigger: function (e) {
+        }, success: function (e) {
+        }, cancel: function (e) {
+        }, fail: function (e) {
+        }
+      }), wx.onMenuShareAppMessage({
+        title: e.title,
+        desc: e.desc,
+        link: e.link,
+        imgUrl: e.imgUrl,
+        trigger: function (e) {
+        },
+        success: function (e) {
+        }
+      }), wx.error(function (e) {
+        alert(e.errMsg)
+      }), wx.onMenuShareQQ({
+        title: e.title, desc: e.desc, link: e.link, imgUrl: e.imgUrl, success: function () {
+        }, cancel: function () {
+        }
+      })
+    })
+  }
+};