You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

202 lines
5.4 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>建党百年</title>
  6. <meta name="keywords" content="keyword1,keyword2,keyword3">
  7. <meta name="description" content="this is my page">
  8. <meta name="content-type" content="text/html; charset=UTF-8">
  9. <meta name="viewport"
  10. content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
  11. <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
  12. <script src="js/comment.js" type="text/javascript" charset="utf-8"></script>
  13. <link rel="stylesheet" type="text/css" href="css/style.css" />
  14. <link rel="stylesheet" type="text/css" href="css/begin.css" />
  15. <style>
  16. /* body {
  17. font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
  18. } */
  19. * {
  20. margin: 0;
  21. padding: 0;
  22. list-style-type: none;
  23. }
  24. a,
  25. img {
  26. border: 0;
  27. }
  28. canvas {
  29. background: url("../img/6.jpg");
  30. background-size: 100%!important;
  31. }
  32. .threeanimate {
  33. -webkit-transform: translate3d(0,0,0);
  34. -moz-transform: translate3d(0, 0, 0);
  35. -ms-transform: translate3d(0, 0, 0);
  36. transform: translate3d(0, 0, 0);
  37. animation: goanimate 4s linear 3s;
  38. }
  39. @keyframes goanimate {
  40. 0% {
  41. opacity: 1;
  42. }
  43. 100% {
  44. opacity: 0.3;
  45. }
  46. }
  47. /* flash */
  48. .flash {
  49. position: relative;
  50. display: none;
  51. z-index: 1000;
  52. }
  53. .flash li {
  54. position: absolute;
  55. left: 0;
  56. top: 0;
  57. }
  58. .imganimat {
  59. animation: identifier 5s linear 0s;
  60. -webkit-transform: translate3d(0,0,0);
  61. -moz-transform: translate3d(0, 0, 0);
  62. -ms-transform: translate3d(0, 0, 0);
  63. transform: translate3d(0, 0, 0);
  64. }
  65. @keyframes identifier {
  66. 0% { opacity: 0.4;
  67. }
  68. 50%{
  69. opacity: 1;
  70. transform: scale(1);
  71. }
  72. 100% {
  73. transform: scale(2);
  74. }
  75. }
  76. </style>
  77. </head>
  78. <body>
  79. <div id="wrap">
  80. <canvas id="c"></canvas>
  81. <script src="./js/TweenMax.min.js"></script>
  82. <script src='./js/script.js'></script>
  83. <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  84. <div style="text-align:center;font:normal 14px/24px 'MicroSoft YaHei';">
  85. </div>
  86. <div class="flash">
  87. <ul>
  88. <li></li>
  89. <li><img id="img" src="./img/004.gif" /></li>
  90. </ul>
  91. </div>
  92. </div>
  93. <script>
  94. //图片简单切换调用语句 imgtransition({speed: 3000, animate: 1000});
  95. // $.fn.imgtransition = function (o) {
  96. // var defaults = {
  97. // speed: 5000,
  98. // animate: 5000
  99. // };
  100. // o = $.extend(defaults, o);
  101. // return this.each(function () {
  102. // var arr_e = $("li", this);
  103. // arr_e.css({ position: "absolute" });
  104. // arr_e.parent().css({ margin: "0", padding: "0", "list-style": "none", overflow: "hidden" });
  105. // function shownext() {
  106. // var active = arr_e.filter(".active").length ? arr_e.filter(".active") : arr_e.first();
  107. // var next = active.next().length ? active.next() : arr_e.first();
  108. // active.css({ "z-index": 9 });
  109. // next.css({ opacity: 0.0, "z-index": 10 }).addClass('active').animate({ opacity: 1.0, }, o.animate, function () {
  110. // active.removeClass('active').css({ "z-index": 8 });
  111. // });
  112. // }
  113. // arr_e.first().css({ "z-index": 9 });
  114. // shownext();
  115. // // setInterval(function(){
  116. // // shownext();
  117. // // },o.speed);
  118. // });
  119. // };
  120. $(document).ready(function () {
  121. var height = document.documentElement.clientWidth,
  122. width = document.documentElement.clientHeight;
  123. $('img').css({
  124. 'width': width,
  125. 'height': height
  126. })
  127. $("#img").addClass('imganimat')
  128. setTimeout(function () {
  129. $(".flash").css({ display: 'block' })
  130. $("canvas").css({ display: 'none' ,'z-index':'1'})
  131. // $('.flash').imgtransition({
  132. // speed: 5000, //图片切换时间
  133. // animate: 5000 //图片切换过渡时间
  134. // });
  135. }, 7000)
  136. });
  137. setTimeout(function() {
  138. window.location.href="begin.html"
  139. }, 10000)
  140. // 横屏
  141. var detectOrient = function () {
  142. var width = document.documentElement.clientWidth,
  143. height = document.documentElement.clientHeight,
  144. wrapper = document.getElementById("wrap"),
  145. style = "";
  146. if (width >= height) { // 竖屏
  147. style += "width:100%";
  148. style += "height:100%;";
  149. // style += "-webkit-transform: rotate(0); transform: rotate(0);";
  150. // style += "-webkit-transform-origin: 0 0;";
  151. // style += "transform-origin: 0 0;";
  152. } else { // 横屏
  153. style += "width:" + height + "px;"; // 注意旋转后的宽高切换
  154. style += "height:" + width + "px;";
  155. style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
  156. // 注意旋转中点的处理
  157. style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
  158. style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
  159. }
  160. wrapper.style.cssText = style;
  161. }
  162. window.onresize = detectOrient;
  163. detectOrient();
  164. </script>
  165. <!-- <script src="js/common.js" type="text/javascript" charset="utf-8"></script> -->
  166. <script src="js/three.min.js" type="text/javascript" charset="utf-8"></script>
  167. </body>
  168. </html>