bannerTest.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <meta http-equiv="x-ua-compatible" content="ie=edge">
  7. <title>大司空云计价 - 远程办公,用免费正版市政计价软件</title>
  8. <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
  9. <link rel="stylesheet" href="css/banner.css">
  10. <link rel="stylesheet" href="css/video.css">
  11. </head>
  12. <body>
  13. <div class="bannerBox">
  14. <div class="width1200">
  15. <div class="banner">
  16. <div class="lottie" id="lottie"></div>
  17. <div class="bannerTitleBox">
  18. <div class="bannerTitle bannerTitle1">云上协同</div>
  19. <div class="bannerTitle bannerTitle2">积累造价数据资产</div>
  20. <div class="bannerTitle3 mt-4">市政建筑计价免费版 永久免费</div>
  21. <div class="mt-4"><a href="" class="btn btn-primary btnHand">立即体验</a></div>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26. <!-- JS. -->
  27. <script src="js/jquery/jquery-3.2.1.min.js"></script>
  28. <script src="js/bootstrap/bootstrap.min.js"></script>
  29. <!-- <script src="js/global.js"></script> -->
  30. <script src="https://cdn.bootcdn.net/ajax/libs/lottie-web/5.8.1/lottie.min.js"></script>
  31. <script type="text/javascript">
  32. var anim;
  33. var elem = document.getElementById('lottie');
  34. lottie.loadAnimation({
  35. container:elem,
  36. renderer:'svg',
  37. loop:true,
  38. autoplay:true,
  39. path:'https://assets5.lottiefiles.com/packages/lf20_yp6mzzyc.json',
  40. });
  41. // 滚动条到顶部的垂直高度
  42. console.log($(window).scrollTop());
  43. // 浏览器显示区域(可视区域)的高度
  44. console.log($(window).height());
  45. // 获取页面的文档高度
  46. // console.log($('.productTwo').offset().top);
  47. console.log();
  48. </script>
  49. </body>
  50. </html>