index.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. </head>
  6. <body>
  7. <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  8. <meta name="viewport" content="width=320,initial-scale=0.4,minimum-scale=0.4">
  9. <title>北京汇创思拓数字科技有限公司</title>
  10. <link rel="stylesheet" type="text/css" href="css/base.css">
  11. <link rel="stylesheet" type="text/css" href="css/index.css">
  12. <link rel="stylesheet" type="text/css" href="css/animate.css">
  13. <script src="js/jweixin-1.0.0.js"></script>
  14. <div class="header clearfix">
  15. <div class="innerAuto">
  16. <img class="fl" src="img/logon.png">
  17. <a class="fr " href="case.html">作品案例</a>
  18. <a class="fr " href="contactUs.html">联系我们</a>
  19. <a class="fr active" href="javascript:;">首页</a>
  20. </div>
  21. </div>
  22. <video id="my-video" volume="1" width="100%" muted height="auto" preload="auto" autoplay="autoplay" loop="loop"
  23. poster="images/videoImg.jpg" x5-video-player-fullscreen="true" webkit-playsinline="true" x-webkit-airplay="true"
  24. playsinline="true" x5-playsinline="">
  25. <source src="media/main.mp4" type="video/mp4;">你的浏览器不支持播放视频。
  26. </video>
  27. <div class="soa">
  28. <img src="img/soa.png" style="width:70%;max-width: 1000px;margin: 0 auto;padding: 20px 0">
  29. </div>
  30. <div class="aboutUs">
  31. <div class="innerAuto flex">
  32. <div class="flex1">
  33. <img id="aboutUsImg" style="width: 100%;" src="img/computer.png">
  34. </div>
  35. <div class="flex1" id="aboutUsTxt">
  36. <div class="centertopDiv" style="max-width: 434px;right: 0;">
  37. <h2>关于我们</h2>
  38. <p>与其更好,不如不同</p>
  39. <p style="margin-top: 20px;">公司成立于2016年。</p>
  40. <p>公司定位:短视频整合服务商。运营服务导向,技术驱动。</p>
  41. <p>服务宗旨:做打通效果和KOL结合的代理商,成为联动营销和闭环营销的服务商。</p>
  42. <p>探究方向:短视频的商业形态之间的相互联动。</p>
  43. <p>客户范围:目前的客户集中在电商、网服、金融、教育、游戏等领域。</p>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="serve">
  49. <div class="innerAuto flex">
  50. <div class="flex1" id="serveTxt">
  51. <div class="centertopDiv">
  52. <h2>服务领域</h2>
  53. <p>新媒体营销服务</p>
  54. <h3 style="margin-top: 20px;">汇创思拓</h3>
  55. <ol>
  56. <li>快手、抖音短视频信息流广告</li>
  57. <li>网红营销</li>
  58. <li>官方账号运营服务</li>
  59. <li>各资源的联动,实现短视频平台的闭环营销</li>
  60. <li>整合各大广告平台视频广告位的程序化购买</li>
  61. </ol>
  62. <h3 style="margin-top: 20px;">567互娱</h3>
  63. <p>娱乐内容生产,账号运营,网红经纪,网红合作</p>
  64. </div>
  65. </div>
  66. <div class="flex1">
  67. <img id="serveImg" style="width: 100%;" src="img/tel.png">
  68. </div>
  69. </div>
  70. </div>
  71. <div class="serverpower tc">
  72. <h2>服务能力</h2>
  73. <p style="font-weight: normal;">专注、所以专业</p>
  74. <div class="flex powerList">
  75. <div class="flex1 powerItem">
  76. <img class="aovImg" src="img/aov1.png">
  77. <p>新媒体服务能力</p>
  78. </div>
  79. <div class="flex1 powerItem">
  80. <img class="aovImg" src="img/aov2.png">
  81. <p>数据能力</p>
  82. </div>
  83. <div class="flex1 powerItem" style="">
  84. <img class="aovImg" src="img/aov3.png">
  85. <p>技术能力</p>
  86. </div>
  87. </div>
  88. </div>
  89. <div class="transparent">
  90. <div class="info">
  91. <h2 class="tc">专注、所以专业</h2>
  92. <span></span>
  93. <p class="tc">致力于成为视频化媒体整合型 运营服务为导向 技术驱动的数据化服务商</p>
  94. </div>
  95. </div>
  96. <div class="client">
  97. <div class="info" id="clientTxt">
  98. <h2 class="tc">合作客户</h2>
  99. <p class="tc">多年服务各渠道电商、网服、游戏、教育、金融等行业</p>
  100. <p class="tc">客户产品嗅觉灵敏,市场趋势把握精准。</p>
  101. </div>
  102. <div class="">
  103. <img src="img/clientlogo.png" style="width:100%;">
  104. </div>
  105. </div>
  106. <div class="foot">
  107. <div class="title tc flex">
  108. <a style="margin-left: 0;" href="javascript:;">首页</a>
  109. <a href="javascript:;">关于我们</a>
  110. <a href="javascript:;">服务领域</a>
  111. <a href="javascript:;">服务能力</a>
  112. <a href="javascript:;">合作客户</a>
  113. <a style="margin-right: 0;" href="contactUs.html">联系我们</a>
  114. </div>
  115. <ul class="clearfix">
  116. <li class="flex">
  117. <img src="img/icontime.png">
  118. <span class="flex1">AM 9:30-PM 18:30</span>
  119. </li>
  120. <li class="active flex">
  121. <img src="img/iconqq.png">
  122. <span class="flex1">2015402235</span>
  123. </li>
  124. <li class="flex">
  125. <img src="img/icontel.png">
  126. <span class="flex1">010-86467990-813</span>
  127. </li>
  128. <li class="flex">
  129. <img src="img/iconemail.png">
  130. <span class="flex1">huichuangsituo@c-top.com.cn</span>
  131. </li>
  132. <li class="active flex">
  133. <img class="" src="img/iconadd.png">
  134. <span class="flex1">北京市朝阳区酒仙桥东风北桥宝马宝信行3楼308</span>
  135. </li>
  136. <li class="flex">
  137. <span class="flex1">汇创思拓©版权所有</span>
  138. </li>
  139. <li class="active flex">
  140. <span class="flex1"><a target="_blank" href="http://beian.miit.gov.cn">京ICP备17011826号</a></span>
  141. </li>
  142. </ul>
  143. </div>
  144. <div id="kong"></div>
  145. <div id="bj"></div>
  146. <script src="js/jquery-1.12.4.min.js" type="application/javascript"></script>
  147. <script src="js/html5media.js"></script>
  148. <script>
  149. //一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以
  150. // document.getElementById('my-video').play();
  151. //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
  152. document.addEventListener("WeixinJSBridgeReady", function () {
  153. document.getElementById('my-video').play();
  154. }, false);
  155. document.onclick = function playVideo() {
  156. document.getElementById('my-video').muted = false
  157. document.getElementById('my-video').play()
  158. document.getElementById('my-video').volume = 0.6
  159. }
  160. function playOn() {
  161. document.getElementById('my-video').muted = false
  162. document.getElementById('my-video').play()
  163. document.getElementById('my-video').volume = 0.6
  164. }
  165. window.addEventListener("scroll", function (e) {
  166. var t = document.documentElement.scrollTop || document.body.scrollTop;
  167. var clientHeight = document.documentElement.clientHeight * 0.7;
  168. var aboutUsImg = document.getElementById('aboutUsImg').offsetTop;
  169. var aboutUsTxt = document.getElementById('aboutUsTxt').offsetTop;
  170. var serveImg = document.getElementById('serveImg').offsetTop;
  171. var serveTxt = document.getElementById('serveTxt').offsetTop;
  172. var clientTxt = document.getElementById('clientTxt').offsetTop;
  173. var h = document.documentElement.offsetHeight || document.body.offsetHeight;
  174. if ((t - aboutUsImg) > -clientHeight) {
  175. $("#aboutUsImg").addClass('animated bounceInLeft');
  176. $("#aboutUsTxt").addClass('animated bounceInUp');
  177. $("#kong").hide();
  178. } else {
  179. $("#kong").show();
  180. }
  181. if ((t - serveImg) > -clientHeight) {
  182. $("#serveImg").addClass('animated bounceInRight');
  183. $("#serveTxt").addClass('animated bounceInUp');
  184. }
  185. if ((t - clientTxt) > -clientHeight) {
  186. $("#clientTxt").addClass('animated bounceInDown');
  187. }
  188. });
  189. </script>
  190. </body>
  191. </html>