BCB Bank static website
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

198 行
4.7 KiB

  1. var hamburger_menu = document.getElementById('mobile-hamburger-menu');
  2. var mobile_menu = document.getElementById('mobile-nav-menu');
  3. hamburger_menu.addEventListener('click', show_menu);
  4. function show_menu() {
  5. 'use strict';
  6. hamburger_menu.classList.toggle('active');
  7. document.body.classList.toggle('non-scrollable');
  8. mobile_menu.classList.toggle('show');
  9. }
  10. var desktop_navigation_menu_links = document.querySelectorAll('#desktop-navigation-menu ul li');
  11. for (var i = 0; i < desktop_navigation_menu_links.length; i++) {
  12. desktop_navigation_menu_links[i].addEventListener('click', changeActiveClass);
  13. }
  14. function changeActiveClass(e) {
  15. for (var i = 0; i < desktop_navigation_menu_links.length; i++) {
  16. desktop_navigation_menu_links[i].classList.remove('active');
  17. }
  18. e.currentTarget.classList.add('active');
  19. }
  20. var page_header = document.getElementById('page-header');
  21. var about_description_animate = document.querySelector('#about .description');
  22. var about_image_animate = document.querySelector('#about figure');
  23. window.addEventListener('scroll', page_scroll);
  24. document.addEventListener('DOMContentLoaded', page_loaded);
  25. function page_scroll() {
  26. 'use strict';
  27. var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  28. if (40 + winScroll < page_header.offsetTop) {
  29. page_header.classList.remove('minimize');
  30. } else {
  31. page_header.classList.add('minimize');
  32. }
  33. if (-120 + winScroll >= about_description_animate.offsetTop) {
  34. about_description_animate.classList.add('show');
  35. about_image_animate.classList.add('show');
  36. }
  37. }
  38. var home_image = document.querySelector('#home figure');
  39. var home_description = document.querySelector('#home .description');
  40. var temp_contact_info = document.querySelector('.temp-contact-info ul');
  41. function page_loaded() {
  42. home_image.classList.remove('hide');
  43. home_description.classList.remove('hide');
  44. if ($(window).width() < 960) {
  45. temp_contact_info.classList.add('owl-carousel');
  46. temp_contact_info.classList.add('owl-contact');
  47. var owl = $('.owl-contact');
  48. owl.owlCarousel({
  49. loop: true,
  50. margin: 0,
  51. autoplay: true,
  52. autoplayTimeout: 3000,
  53. autoplayHoverPause: true,
  54. stagePadding: 100,
  55. responsiveClass: true,
  56. responsive: {
  57. 0: {
  58. items: 1
  59. },
  60. 600: {
  61. items: 1
  62. },
  63. 1000: {
  64. items: 1
  65. }
  66. }
  67. });
  68. $(document).on('click', 'a[href^="#"]', function (event) {
  69. event.preventDefault();
  70. $('html, body').animate({
  71. scrollTop: $($.attr(this, 'href')).offset().top - 730
  72. }, 500);
  73. });
  74. }
  75. else {
  76. temp_contact_info.classList.remove('owl-carousel');
  77. temp_contact_info.classList.remove('owl-contact');
  78. }
  79. }
  80. var mobile_nav_lists = document.querySelectorAll('#mobile-nav-menu ul li');
  81. for (var i = 0; i < mobile_nav_lists.length; i++) {
  82. mobile_nav_lists[i].addEventListener('click', hide_mobile_nav);
  83. }
  84. function hide_mobile_nav() {
  85. mobile_menu.classList.remove('show');
  86. hamburger_menu.classList.remove('active');
  87. document.body.classList.remove('non-scrollable');
  88. }
  89. // Native method of doing smooth scrolling
  90. // document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
  91. // anchor.addEventListener('click', function (e) {
  92. // e.preventDefault();
  93. // document.querySelector(this.getAttribute('href')).scrollIntoView({
  94. // behavior: 'smooth'
  95. // });
  96. // });
  97. // });
  98. // Support for old Browsers.
  99. $(document).on('click', 'a[href^="#"]', function (event) {
  100. event.preventDefault();
  101. $('html, body').animate({
  102. scrollTop: $($.attr(this, 'href')).offset().top
  103. }, 500);
  104. });
  105. var owl = $('.owl-service');
  106. owl.owlCarousel({
  107. loop: true,
  108. margin: 0,
  109. autoplay: true,
  110. autoplayTimeout: 3000,
  111. autoplayHoverPause: true,
  112. responsiveClass: true,
  113. responsive: {
  114. 0: {
  115. items: 1,
  116. stagePadding: 100,
  117. },
  118. 600: {
  119. items: 1,
  120. stagePadding: 100,
  121. },
  122. 1000: {
  123. items: 4
  124. }
  125. }
  126. });
  127. var service_carousel_Btn = $('.owl-service');
  128. owl.owlCarousel();
  129. $('#service-carousel-left-btn').click(function () {
  130. "use strict";
  131. service_carousel_Btn.trigger('next.owl.carousel', [300]);
  132. });
  133. $('#service-carousel-right-btn').click(function () {
  134. "use strict";
  135. service_carousel_Btn.trigger('prev.owl.carousel', [300]);
  136. });
  137. var owl = $('.owl-testimonial');
  138. owl.owlCarousel({
  139. loop: true,
  140. margin: 0,
  141. autoplay: true,
  142. autoplayTimeout: 3000,
  143. autoplayHoverPause: true,
  144. responsiveClass: true,
  145. responsive: {
  146. 0: {
  147. items: 1
  148. },
  149. 600: {
  150. items: 1
  151. },
  152. 1000: {
  153. items: 2
  154. }
  155. }
  156. });
  157. var testimonial_carousel_Btn = $('.owl-testimonial');
  158. owl.owlCarousel();
  159. $('#testimonial-carousel-left-btn').click(function () {
  160. "use strict";
  161. testimonial_carousel_Btn.trigger('next.owl.carousel', [300]);
  162. });
  163. $('#testimonial-carousel-right-btn').click(function () {
  164. "use strict";
  165. testimonial_carousel_Btn.trigger('prev.owl.carousel', [300]);
  166. });