main.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. $(document).ready(function () {
  2. //配置项
  3. $("#fullpage").fullpage({
  4. //可以为每一个section设置background-color属性
  5. // sectionsColor: ["green", "orange", "gray", "red", "yellow"],
  6. //定义是否通过箭头来控制slide幻灯片,默认为true。当我们设置为false,则幻灯片左右两则的箭头就会消失,在移动设备上,我们可以通过滑动来操作幻灯片
  7. controlArrows: true,
  8. //每一页的内容是否垂直居中,默认为true.一般保持默认值
  9. verticalCentered: true,
  10. //滚动速度,单位为毫秒,默认为700
  11. scrollingSpeed: 700,
  12. //定义锚连接,默认为[]。有了锚链接,用户就可以快速打开定位到某一页面
  13. //注意定义锚链接的时候,值不要和页面中任意的id或name相同,尤其是在IE浏览器下。而且定义时不需要要加#
  14. // anchors: ["page1", "page2", "page3", "page4", "page5"],
  15. //是否锁定锚链接,默认为false。如果设置为true,那么定义的锚链接,也就是anchors属性则没有效果。这个配置项使用的比较少
  16. lockAnchors: false,
  17. //定义页面section滚动的动画方式,如果修改此项,需要引入jquery.easings插件,或者jquery ui
  18. easing: "easeInOutCubic",
  19. //是否使用CSS3 transforms 来实现滚动效果,默认为true。这个配置项可以提高支持css3的浏览器,比如移动设备等的速度,如果浏览器不支持css3,则会使用jquery来替代css3实现滚动效果
  20. css3: true,
  21. //滚动到最顶部后是否连续滚动到底部,默认为false
  22. loopTop: false,
  23. //滚动到最底部是否连续滚动回顶部,默认为false
  24. loopBottom: false,
  25. //横向slider幻灯片是否循环滚动,默认为true
  26. loopHorizontal: true,
  27. //是否使用插件的滚动方式,默认为true,如果选择false,则会出现浏览器自带的滚动条,将不会按页滚动,而是按照滚动条的默认行为来滚动
  28. autoScrolling: true,
  29. //是否包含滚动条,默认为false,如果设置为true,则浏览器自带的滚动条出现,页面滚动时还是按页滚动,但是滚动条的默认行为也有效
  30. scrollBar: false,
  31. //设置每一个section顶部和底部的padding,默认为0,一般如果需要设置一个固定顶部或者底部的菜单、导航、元素等,可以使用这两个配置项
  32. paddingTop: 0,
  33. paddingBottom: 0,
  34. //固定的元素,默认为null,需要配置一个jquery选择器。在页面滚动的时候,fixedElements设置的元素固定不动
  35. fixedElements: "",
  36. //是否可以使用键盘方向键导航,默认为true
  37. keyboardScrolling: true,
  38. //在移动设备中滑动页面的敏感性,默认为5,是按百分比来衡量,最高为100,越大则越难滑动
  39. touchSensitivity: 5,
  40. //是否循环滚动,默认为false。如果设置为true,则页面会循环滚动,而不像loopTop或loopBottom那样出现跳动,注意这个属性和这两者不兼容,请不要同时使用
  41. continuousVertical: false,
  42. //锚链接是否可以控制滚动动画,默认为true。如果设置为false,则通过锚链接定位到某个页面显示不再有动画效果
  43. animateAnchor: true,
  44. //是否记录历史,默认为true,可以记录页面滚动的历史,通过浏览器的前进后退来导航。注意如果设置了autoScrolling:false,那么这个配置也将被关闭,即设置为false
  45. recordHistory: true,
  46. //绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认为false。可以设置为菜单的jquery选择器
  47. menu: '#example-navbar-collapse',
  48. //是否显示导航,默认为false。如果设置为true,会显示小圆点,作为导航
  49. navigation: true,
  50. //导航小圆点的位置,可以设置为left或者right
  51. navigationPosition: "right",
  52. //导航小圆点的tooltips设置,默认为[],注意按照顺序设置
  53. // navigationTooltips: ["page1", "page2", "page3", "page4", "page5"],
  54. //是否显示当前页面的导航的tooltip信息,默认为false
  55. showActiveTooltip: true,
  56. //是否显示横向幻灯片的导航,默认为false
  57. slidesNavigation: true,
  58. //横向幻灯片导航的位置,默认为bottom,可以设置为top或bottom
  59. slidesNavPosition: "top",
  60. //内容超过满屏后是否显示滚动条,默认为false。如果设置为true,则会显示滚动条,如果滚动查看内容,还需要jquery.slimscroll插件的配合
  61. scrollOverflow: false,
  62. //section的选择器,默认为.section
  63. sectionSelector: ".section",
  64. //slideSelector:slide的选择器,默认为.slide
  65. slideSelector: ".slide",
  66. afterLoad: function (anchorLink, index) {
  67. var num = index.index;
  68. if (num == 0) {
  69. $('.logo').css('animation', 'logo1 0.6s both');
  70. $('#navbar_ani').css('animation', 'navbar_ani1 .6s both');
  71. $('.head_wrap').css('height', '110px')
  72. } else {
  73. $('.logo').css('animation', 'logo 0.6s both');
  74. $('#navbar_ani').css('animation', 'navbar_ani .6s both');
  75. }
  76. if (num == 7) {
  77. $('.head_bg').fadeOut();
  78. $('.nav>li>a').css({
  79. 'color': '#fff',
  80. 'background': 'transparent'
  81. });
  82. $('.nav>li.selected>a').css('color', '#fff');
  83. $('.nav>li.selected').removeClass('selected2');
  84. $('.nav>li.selected').addClass('selected1');
  85. $('.logo_img1').css('display', 'none');
  86. $('.logo_img').css('display', 'block');
  87. $('.head_wrap').css('background', 'transparent');
  88. var flag;
  89. $('.nav>li>a').hover(function () {
  90. if ($(this).parent('li').hasClass('selected')) {
  91. flag = true;
  92. $(this).parent('li').removeClass('selected');
  93. } else {
  94. flag = false;
  95. }
  96. $(this).css({
  97. 'background': '#F07817',
  98. "color": '#fff'
  99. })
  100. }, function () {
  101. if (flag == true) {
  102. $(this).parent('li').addClass('selected');
  103. $(this).css({
  104. 'color': '#fff',
  105. "background": 'transparent'
  106. });
  107. } else {
  108. $(this).css({
  109. 'background': 'transparent',
  110. "color": '#fff'
  111. })
  112. }
  113. })
  114. $('.dropdown-menu').hover(function () {
  115. if ($(this).parent('li').hasClass('selected')) {
  116. flag = true;
  117. $(this).parent('li').removeClass('selected');
  118. } else {
  119. flag = false;
  120. }
  121. $(this).siblings('a').css({
  122. 'background': '#F07817',
  123. "color": '#fff'
  124. })
  125. // // if ($(this).parent('li').hasClass('selected')) {
  126. // $(this).siblings('a').css({
  127. // 'background': '#1457AF',
  128. // "color": '#fff'
  129. // })
  130. // // }
  131. }, function () {
  132. if (flag == true) {
  133. $(this).parent('li').addClass('selected');
  134. $(this).siblings('a').css({
  135. 'background': 'transparent',
  136. "color": '#ffffff'
  137. })
  138. } else {
  139. $(this).siblings('a').css({
  140. 'background': 'transparent',
  141. "color": '#fff'
  142. })
  143. }
  144. });
  145. } else {
  146. $('.head_bg').fadeIn(1000);
  147. $('.nav>li>a').css({
  148. 'color': '#333',
  149. 'background': '#fff'
  150. });
  151. $('.nav>li.selected>a').css('color', '#1457AF');
  152. $('.nav>li.selected').removeClass('selected1');
  153. $('.nav>li.selected').addClass('selected2');
  154. // $('.nav li.active a::before').css('background', '#1F6BE0');
  155. $('.logo_img1').css('display', 'block');
  156. $('.logo_img').css('display', 'none');
  157. var flag;
  158. $('.nav>li>a').hover(function () {
  159. if ($(this).parent('li').hasClass('selected')) {
  160. flag = true;
  161. $(this).parent('li').removeClass('selected');
  162. } else {
  163. flag = false;
  164. }
  165. $(this).css({
  166. 'background': '#1457AF',
  167. "color": '#fff'
  168. })
  169. }, function () {
  170. if (flag == true) {
  171. $(this).parent('li').addClass('selected');
  172. console.log($(this).parent('li'))
  173. $(this).css({
  174. 'color': '#1457AF',
  175. "background": '#fff'
  176. });
  177. } else {
  178. $(this).css({
  179. 'background': '#fff',
  180. "color": '#333'
  181. })
  182. }
  183. })
  184. $('.dropdown-menu').hover(function () {
  185. if ($(this).parent('li').hasClass('selected')) {
  186. flag = true;
  187. $(this).parent('li').removeClass('selected');
  188. } else {
  189. flag = false;
  190. }
  191. $(this).siblings('a').css({
  192. 'background': '#1457AF',
  193. "color": '#fff'
  194. })
  195. // // if ($(this).parent('li').hasClass('selected')) {
  196. // // }
  197. // $(this).siblings('a').css({
  198. // 'background': '#1457AF',
  199. // "color": '#fff'
  200. // })
  201. }, function () {
  202. if (flag == true) {
  203. $(this).parent('li').addClass('selected');
  204. $(this).siblings('a').css({
  205. 'background': '#fff',
  206. "color": '#4678C6'
  207. })
  208. } else {
  209. $(this).siblings('a').css({
  210. 'background': '#fff',
  211. "color": '#333'
  212. })
  213. }
  214. });
  215. }
  216. }
  217. });
  218. $(document).off('click.bs.dropdown.data-api');
  219. (function (win) {
  220. var timer;
  221. function changeHeight() {
  222. var h = $(window).height();
  223. console.log(h)
  224. if (h <= 746) {
  225. $('.content-title-wrap').addClass('title_juli');
  226. $('.case_wrap ul li img').css({
  227. 'height': '500px'
  228. });
  229. $('.case_card_hover .case_box_hover').css({
  230. 'top': '150px'
  231. })
  232. $('.news_more').css({
  233. 'margin': '-15px auto'
  234. })
  235. $('.about_list_wrap ul li ').css({
  236. 'height': '170px'
  237. })
  238. $('.invite_con').css({
  239. 'height': '490px'
  240. })
  241. $('.invite_con .invite_link').css({
  242. 'top': '418px'
  243. })
  244. }
  245. }
  246. win.addEventListener('resize', function () {
  247. clearTimeout(timer);
  248. timer = setTimeout(changeHeight, 300);
  249. }, false);
  250. changeHeight();
  251. })(window);
  252. $('.top').click(function (e) {
  253. e.preventDefault();
  254. $("body,html").animate({
  255. scrollTop: 0
  256. }, 500);
  257. });
  258. });