case.html 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696
  1. <!doctype html>
  2. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
  3. <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  4. <meta name="viewport" content="width=320,initial-scale=0.4,minimum-scale=0.4,user-scalable=0">
  5. <title>北京汇创思拓有限公司</title>
  6. <link rel="stylesheet" type="text/css" href="css/base.css">
  7. <link rel="stylesheet" href="css/swiper.min.css">
  8. <style>
  9. body{
  10. background: #fbfbfb;
  11. }
  12. *{
  13. box-sizing:border-box
  14. }
  15. .swiperNav,.swiperNav1,.swiperNav2,.swiperNav3{
  16. margin: 100px 0;
  17. }
  18. .swiper-container {
  19. padding-top: 60px;
  20. width: 100%;
  21. overflow:hidden ;
  22. height: 565px;
  23. }
  24. .swiper-slide {
  25. text-align: center;
  26. position: relative;
  27. height: auto;
  28. border: 2px solid #ececec;
  29. }
  30. .swiper-slide .img{
  31. position: absolute;
  32. top: 0;left: 0;
  33. width: 100%;
  34. height: 400px;
  35. }
  36. .swiper-slide .img img{
  37. width: 100%;
  38. height: 100%;
  39. }
  40. .swiper-slide .txt {
  41. position: absolute;
  42. top: 400px;
  43. left: 0;
  44. width: 100%;height: 100px;
  45. line-height: 25px;
  46. background: #fff;
  47. }
  48. .swiper-slide .txt h2{
  49. padding: 0 5px;
  50. margin-top: 25px;
  51. font-size: 16px;
  52. overflow: hidden;
  53. text-overflow:ellipsis;
  54. white-space: nowrap;
  55. color: #333;
  56. font-weight: 600;
  57. }
  58. .swiper-slide:hover {
  59. border: 2px solid #fbfbfb;
  60. }
  61. .swiper-slide:hover .img{
  62. top:-20px;
  63. height:430px;
  64. }
  65. .swiper-slide:hover .txt{
  66. top:430px;
  67. }
  68. .swiper-slide:hover .txt h2{
  69. margin-top: 15px;
  70. }
  71. .bofang{
  72. z-index: 100;
  73. width: 80px;
  74. position: absolute;
  75. top: 160px;left: 50%;
  76. transform: translateX(-50%) ;
  77. -webkit-transform: translateX(-50%) ;
  78. -moz-transform: translateX(-50%) ;
  79. -ms-transform: translateX(-50%) ;
  80. }
  81. .swiper-slide .img video{
  82. width: 100%;
  83. height: 100%;
  84. /*object-fit: fill;*/
  85. /*object-fit:cover*/
  86. }
  87. video{
  88. object-fit: fill;
  89. }
  90. .nav{
  91. margin:100px 0;
  92. }
  93. .navitem{
  94. width: 33.3%;
  95. float: left;
  96. }
  97. .navitem img{
  98. height: 80px;
  99. margin: 0 auto;
  100. }
  101. .navitem h2{
  102. color: #333333;
  103. font-size: 26px;
  104. }
  105. .navitem p{
  106. color: #999;
  107. font-size: 14px;
  108. line-height: 20px;
  109. }
  110. .swiper-button-next, .swiper-button-prev{
  111. width: 44px;
  112. height: 44px;
  113. margin-top: 0;
  114. top: 0;
  115. }
  116. .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  117. background-image: url('img/left.jpg');
  118. background-size: cover;
  119. }
  120. .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
  121. background-image: url('img/right.jpg');
  122. background-size: cover;
  123. }
  124. .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
  125. left: auto;
  126. right: 54px;
  127. }
  128. </style>
  129. </head>
  130. <body>
  131. <div class="header clearfix">
  132. <div class="innerAuto">
  133. <img class="fl" src="img/logo.png">
  134. <a class="fr active" href="javascript:;">作品案例</a>
  135. <a class="fr " href="contactUs.html">联系我们</a>
  136. <a class="fr " href="index.html">首页</a>
  137. </div>
  138. </div>
  139. <img src="img/casebanner.jpeg" style="width: 100%">
  140. <div class="innerAuto">
  141. <div class="nav tc clearfix">
  142. <div class="navitem" onclick="navitemClick(1)">
  143. <img id="navitemImg1" src="img/hei1.png">
  144. <h2>客户案例</h2>
  145. <p>专业精湛的技术+服务营销理念</p>
  146. <p>为客户提供高效卓越的营销体验</p>
  147. </div>
  148. <!-- onclick="navitemClick(2)" -->
  149. <div class="navitem">
  150. <img id="navitemImg2" src="img/hui2.png">
  151. <h2>KOL案例</h2>
  152. <p>时下当红媒体达人+精准定向媒体</p>
  153. <p>形成联动的闭环营销</p>
  154. </div>
  155. <!-- onclick="navitemClick(3)" -->
  156. <div class="navitem">
  157. <img id="navitemImg3" src="img/hui3.png">
  158. <h2>爱笑办公室</h2>
  159. <p>创艺搞笑元素+自媒体营销策略</p>
  160. <p>用最短的镜头吸引你的眼球</p>
  161. </div>
  162. </div>
  163. <div id="videoList">
  164. <div class="swiperNav1 swiperNavAll">
  165. <div class="swiper-container swiper-container1 swiper-container-horizontal">
  166. <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
  167. <div class="swiper-slide" style="width: 400px; margin-right: 30px;">
  168. <div class="img">
  169. <video width="100%" height="100%">
  170. <source src="media/1.mp4" type="video/mp4;">你的浏览器不支持播放视频。
  171. </video>
  172. <div class="txt">
  173. <h2></h2>
  174. <p>媒体:头条</p>
  175. </div>
  176. </div>
  177. <img class="bofang" src="img/bo.png">
  178. </div>
  179. <div class="swiper-slide" style="width: 400px; margin-right: 30px;">
  180. <div class="img">
  181. <video width="100%" height="100%">
  182. <source src="media/222.mp4" type="video/mp4;">你的浏览器不支持播放视频。
  183. </video>
  184. <div class="txt">
  185. <h2></h2>
  186. <p>媒体:头条</p>
  187. </div>
  188. </div>
  189. <img class="bofang" src="img/bo.png">
  190. </div>
  191. <div class="swiper-slide" style="width: 400px; margin-right: 30px;">
  192. <div class="img">
  193. <video width="100%" height="100%">
  194. <source src="media/3.mp4" type="video/mp4;">你的浏览器不支持播放视频。
  195. </video>
  196. <div class="txt">
  197. <h2></h2>
  198. <p>媒体:头条</p>
  199. </div>
  200. </div>
  201. <img class="bofang" src="img/bo.png">
  202. </div>
  203. <div class="swiper-slide" style="width: 400px; margin-right: 30px;">
  204. <div class="img">
  205. <video width="100%" height="100%">
  206. <source src="media/4.mp4" type="video/mp4;">你的浏览器不支持播放视频。
  207. </video>
  208. <div class="txt">
  209. <h2></h2>
  210. <p>媒体:头条</p>
  211. </div>
  212. </div>
  213. <img class="bofang" src="img/bo.png">
  214. </div>
  215. <div class="swiper-slide" style="width: 400px; margin-right: 30px;">
  216. <div class="img">
  217. <video width="100%" height="100%">
  218. <source src="media/5.mp4" type="video/mp4;">你的浏览器不支持播放视频。
  219. </video>
  220. <div class="txt">
  221. <h2></h2>
  222. <p>媒体:头条</p>
  223. </div>
  224. </div>
  225. <img class="bofang" src="img/bo.png">
  226. </div>
  227. <div class="swiper-slide" style="width: 400px; margin-right: 30px;">
  228. <div class="img">
  229. <video width="100%" height="100%">
  230. <source src="media/6.MP4" type="video/mp4;">你的浏览器不支持播放视频。
  231. </video>
  232. <div class="txt">
  233. <h2></h2>
  234. <p>媒体:头条</p>
  235. </div>
  236. </div>
  237. <img class="bofang" src="img/bo.png">
  238. </div>
  239. <div class="swiper-slide" style="width: 400px; margin-right: 30px;">
  240. <div class="img">
  241. <video width="100%" height="100%">
  242. <source src="media/7.mp4" type="video/mp4;">你的浏览器不支持播放视频。
  243. </video>
  244. <div class="txt">
  245. <h2></h2>
  246. <p>媒体:头条</p>
  247. </div>
  248. </div>
  249. <img class="bofang" src="img/bo.png">
  250. </div>
  251. <!-- <div class="swiper-slide" style="width: 400px; margin-right: 30px;">
  252. <div class="img">
  253. <video width="100%" height="100%">
  254. <source src="media/8.mp4" type="video/mp4;">你的浏览器不支持播放视频。
  255. </video>
  256. <div class="txt">
  257. <h2></h2>
  258. <p>媒体:快手</p>
  259. </div>
  260. </div>
  261. <img class="bofang" src="img/bo.png">
  262. </div>
  263. <div class="swiper-slide" style="width: 400px; margin-right: 30px;">
  264. <div class="img">
  265. <video width="100%" height="100%">
  266. <source src="media/9.mp4" type="video/mp4;">你的浏览器不支持播放视频。
  267. </video>
  268. <div class="txt">
  269. <h2></h2>
  270. <p>媒体:快手</p>
  271. </div>
  272. </div>
  273. <img class="bofang" src="img/bo.png">
  274. </div> -->
  275. <div class="swiper-slide" style="width: 400px; margin-right: 30px;">
  276. <div class="img">
  277. <video width="100%" height="100%">
  278. <source src="media/10.mp4" type="video/mp4;">你的浏览器不支持播放视频。
  279. </video>
  280. <div class="txt">
  281. <h2></h2>
  282. <p>媒体:快手</p>
  283. </div>
  284. </div>
  285. <img class="bofang" src="img/bo.png">
  286. </div>
  287. <div class="swiper-slide" style="width: 400px; margin-right: 30px;">
  288. <div class="img">
  289. <video width="100%" height="100%">
  290. <source src="media/11.mp4" type="video/mp4;">你的浏览器不支持播放视频。
  291. </video>
  292. <div class="txt">
  293. <h2></h2>
  294. <p>媒体:快手</p>
  295. </div>
  296. </div>
  297. <img class="bofang" src="img/bo.png">
  298. </div>
  299. <!-- <div class="swiper-slide" style="width: 400px; margin-right: 30px;">
  300. <div class="img">
  301. <video width="100%" height="100%">
  302. <source src="media/12.mp4" type="video/mp4;">你的浏览器不支持播放视频。
  303. </video>
  304. <div class="txt">
  305. <h2></h2>
  306. <p>媒体:快手</p>
  307. </div>
  308. </div>
  309. <img class="bofang" src="img/bo.png">
  310. </div> -->
  311. <div class="swiper-slide" style="width: 400px; margin-right: 30px;">
  312. <div class="img">
  313. <video width="100%" height="100%">
  314. <source src="media/13.mp4" type="video/mp4;">你的浏览器不支持播放视频。
  315. </video>
  316. <div class="txt">
  317. <h2></h2>
  318. <p>媒体:快手</p>
  319. </div>
  320. </div>
  321. <img class="bofang" src="img/bo.png">
  322. </div>
  323. <div class="swiper-slide" style="width: 400px; margin-right: 30px;">
  324. <div class="img">
  325. <video width="100%" height="100%">
  326. <source src="media/14.mp4" type="video/mp4;">你的浏览器不支持播放视频。
  327. </video>
  328. <div class="txt">
  329. <h2></h2>
  330. <p>媒体:快手</p>
  331. </div>
  332. </div>
  333. <img class="bofang" src="img/bo.png">
  334. </div>
  335. <div class="swiper-slide" style="width: 400px; margin-right: 30px; margin-right:50px">
  336. <div class="img">
  337. <video width="100%" height="100%">
  338. <source src="media/15.mp4" type="video/mp4;">你的浏览器不支持播放视频。
  339. </video>
  340. <div class="txt">
  341. <h2></h2>
  342. <p>媒体:快手</p>
  343. </div>
  344. </div>
  345. <img class="bofang" src="img/bo.png">
  346. </div>
  347. </div>
  348. <div class="swiper-button-prev swiper-button-prev1"></div>
  349. <div class="swiper-button-next swiper-button-next1"></div>
  350. </div>
  351. </div>
  352. <div class="swiperNav2 swiperNavAll hide "></div>
  353. <div class="swiperNav3 swiperNavAll hide"></div>
  354. </div>
  355. </div>
  356. <div class="foot">
  357. <div class="title tc flex">
  358. <a style="margin-left: 0;" href="javascript:;">首页</a>
  359. <a href="javascript:;">关于我们</a>
  360. <a href="javascript:;">服务领域</a>
  361. <a href="javascript:;">服务能力</a>
  362. <a href="javascript:;">合作客户</a>
  363. <a style="margin-right: 0;" href="contactUs.html">联系我们</a>
  364. </div>
  365. <ul class="clearfix">
  366. <li class="flex">
  367. <img src="img/icontime.png">
  368. <span class="flex1">AM 9:30-PM 18:30</span>
  369. </li>
  370. <li class="active flex">
  371. <img src="img/iconqq.png">
  372. <span class="flex1">2015402235</span>
  373. </li>
  374. <li class="flex">
  375. <img src="img/icontel.png">
  376. <span class="flex1">010-86467990</span>
  377. </li>
  378. <li class="flex">
  379. <img src="img/iconemail.png">
  380. <span class="flex1">huichuangsituo@c-top.com.cn</span>
  381. </li>
  382. <li class="active flex">
  383. <img class="" src="img/iconadd.png">
  384. <span class="flex1">北京市朝阳区酒仙桥路兆维工业园51幢A1-1门2层</span>
  385. </li>
  386. <li class="flex">
  387. <span class="flex1">汇创思拓©版权所有</span>
  388. </li>
  389. <li class="active flex">
  390. <span class="flex1"><a target="_blank" href="http://beian.miit.gov.cn">京ICP备17011826号</a></span>
  391. </li>
  392. </ul>
  393. </div>
  394. <script src="js/jquery-1.12.4.min.js" type="application/javascript"></script>
  395. <script src="js/swiper.min.js"></script>
  396. <script src="js/html5media.js"></script>
  397. <script>
  398. var swiper = new Swiper('.swiper-container1', {
  399. slidesPerView: 4,
  400. spaceBetween:20,
  401. navigation: {
  402. nextEl: '.swiper-button-next1',
  403. prevEl: '.swiper-button-prev1',
  404. },
  405. });
  406. $(".swiperNavAll").on("click",'video',function(){
  407. $(this).trigger('pause');
  408. $(this).parents('.swiper-slide').find('.bofang').show();
  409. });
  410. $(".swiperNavAll").on("click",'.bofang',function(){
  411. $(this).parents('#videoList').find('video').trigger('pause');
  412. $(this).parents('#videoList').find('.bofang').show();
  413. $(this).hide();
  414. $(this).prev().find('video').trigger('play');
  415. });
  416. var index2=true;
  417. var index3=true;
  418. function navitemClick(val) {
  419. $("#navitemImg1").attr('src',"img/hui1.png");
  420. $("#navitemImg2").attr('src',"img/hui2.png");
  421. $("#navitemImg3").attr('src',"img/hui3.png");
  422. if(val==1){
  423. $("#navitemImg1").attr('src',"img/hei1.png");
  424. $('.swiperNav1').show();
  425. $('.swiperNav2').hide();
  426. $('.swiperNav3').hide();
  427. $(".swiper-container1").find('.swiper-wrapper').css({
  428. "transform": "translate3d(0px, 0px, 0px)",
  429. "transition-duration": "3ms"
  430. })
  431. }else if(val==2){
  432. $("#navitemImg2").attr('src',"img/hei2.png");
  433. $('.swiperNav1').hide();
  434. $('.swiperNav2').show();
  435. $('.swiperNav3').hide();
  436. if(index2==true){
  437. $(".swiperNav2").html('<div class="swiper-container swiper-container2 swiper-container-horizontal">' +
  438. '<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">' +
  439. '<div class="swiper-slide" style="width: 400px; margin-right: 30px;">' +
  440. '<div class="img">' +
  441. '<video width="100%" height="100%" ' +
  442. 'poster="img/kol/1.jpg">' +
  443. '<source src="mp4/kol/1.mp4" type="video/mp4;">你的浏览器不支持播放视频。</source>' +
  444. '</video>' +
  445. '<div class="txt">' +
  446. '<h2>能赚钱的APP!</h2>' +
  447. '<p>媒体:快手</p>' +
  448. '</div>' +
  449. '</div><img class="bofang" src="img/bo.png">' +
  450. '</div>' +
  451. '<div class="swiper-slide" style="width: 400px; margin-right: 30px;">' +
  452. '<div class="img">' +
  453. '<video width="100%" height="100%" ' +
  454. 'poster="img/kol/2.jpg">' +
  455. '<source src="mp4/kol/2.mp4" type="video/mp4;">你的浏览器不支持播放视频。</source>' +
  456. '</video>' +
  457. '<div class="txt">' +
  458. '<h2>赚钱攻略,想赚钱你就来!</h2>' +
  459. '<p>媒体:快手</p>' +
  460. '</div>' +
  461. '</div><img class="bofang" src="img/bo.png">' +
  462. '</div>' +
  463. '</div>' +
  464. '<div class="swiper-button-prev swiper-button-prev2"></div>' +
  465. '<div class="swiper-button-next swiper-button-next2"></div>' +
  466. '</div>')
  467. var swiper2 = new Swiper('.swiper-container2', {
  468. slidesPerView: 4,
  469. spaceBetween: 20,
  470. navigation: {
  471. nextEl: '.swiper-button-next2',
  472. prevEl: '.swiper-button-prev2',
  473. },
  474. });
  475. }
  476. index2=false;
  477. $(".swiper-container2").find('.swiper-wrapper').css({
  478. "transform": "translate3d(0px, 0px, 0px)",
  479. "transition-duration": "3ms"
  480. })
  481. }else if(val==3){
  482. $("#navitemImg3").attr('src',"img/hei3.png");
  483. $('.swiperNav1').hide()
  484. $('.swiperNav2').hide()
  485. $('.swiperNav3').show()
  486. if(index3==true){
  487. $(".swiperNav3").html('<div class="swiper-container swiper-container3 swiper-container-horizontal">' +
  488. '<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">' +
  489. '<div class="swiper-slide" style="width: 400px; margin-right: 30px;">' +
  490. '<div class="img">' +
  491. '<video width="100%" height="100%" ' +
  492. 'poster="img/xiao/1.jpg">' +
  493. '<source src="mp4/xiao/1.mp4" type="video/mp4;">你的浏览器不支持播放视频。</source>' +
  494. '</video>' +
  495. '<div class="txt">' +
  496. '<h2>为何电梯女子突然惶恐不安?</h2>' +
  497. '<p>媒体:抖音</p>' +
  498. '</div>' +
  499. '</div><img class="bofang" src="img/bo.png">' +
  500. '</div>' +
  501. '<div class="swiper-slide" style="width: 400px; margin-right: 30px;">' +
  502. '<div class="img">' +
  503. '<video width="100%" height="100%" ' +
  504. 'poster="img/xiao/2.jpg">' +
  505. '<source src="mp4/xiao/2.mp4" type="video/mp4;">你的浏览器不支持播放视频。</source>' +
  506. '</video>' +
  507. '<div class="txt">' +
  508. '<h2>本想假日出去玩,没想到中途因为一把钥匙引发一场大战!</h2>' +
  509. '<p>媒体:抖音</p>' +
  510. '</div>' +
  511. '</div><img class="bofang" src="img/bo.png">' +
  512. '</div>' +
  513. '<div class="swiper-slide" style="width: 400px; margin-right: 30px;">' +
  514. '<div class="img">' +
  515. '<video width="100%" height="100%" ' +
  516. 'poster="img/xiao/3.jpg">' +
  517. '<source src="mp4/xiao/3.mp4" type="video/mp4;">你的浏览器不支持播放视频。</source>' +
  518. '</video>' +
  519. '<div class="txt">' +
  520. '<h2>男朋友不远万里来看我,可是却看到这样一幕!</h2>' +
  521. '<p>媒体:抖音</p>' +
  522. '</div>' +
  523. '</div><img class="bofang" src="img/bo.png">' +
  524. '</div>' +
  525. '<div class="swiper-slide" style="width: 400px; margin-right: 30px;">' +
  526. '<div class="img">' +
  527. '<video width="100%" height="100%" ' +
  528. 'poster="img/xiao/4.jpg">' +
  529. '<source src="mp4/xiao/4.mp4" type="video/mp4;">你的浏览器不支持播放视频。</source>' +
  530. '</video>' +
  531. '<div class="txt">' +
  532. '<h2>有那么一瞬间怀疑人生</h2>' +
  533. '<p>媒体:抖音</p>' +
  534. '</div>' +
  535. '</div><img class="bofang" src="img/bo.png">' +
  536. '</div>' +
  537. '<div class="swiper-slide" style="width: 400px; margin-right: 30px;">' +
  538. '<div class="img">' +
  539. '<video width="100%" height="100%" ' +
  540. 'poster="img/xiao/5.jpg">' +
  541. '<source src="mp4/xiao/5.mp4" type="video/mp4;">你的浏览器不支持播放视频。</source>' +
  542. '</video>' +
  543. '<div class="txt">' +
  544. '<h2>这个公司看起来不简单啊!请问第一个小姐姐应该叫最后一个小姐姐什么?</h2>' +
  545. '<p>媒体:抖音</p>' +
  546. '</div>' +
  547. '</div><img class="bofang" src="img/bo.png">' +
  548. '</div>' +
  549. '</div>' +
  550. '<div class="swiper-button-prev swiper-button-prev3"></div>' +
  551. '<div class="swiper-button-next swiper-button-next3"></div>' +
  552. '</div>');
  553. var swiper3 = new Swiper('.swiper-container3', {
  554. slidesPerView: 4,
  555. spaceBetween: 20,
  556. navigation: {
  557. nextEl: '.swiper-button-next3',
  558. prevEl: '.swiper-button-prev3',
  559. },
  560. });
  561. }
  562. index3=false;
  563. $(".swiper-container3").find('.swiper-wrapper').css({
  564. "transform": "translate3d(0px, 0px, 0px)",
  565. "transition-duration": "3ms"
  566. })
  567. }
  568. }
  569. </script>
  570. </body></html>