index.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. // 产品鼠标移入移出
  2. let fls = true
  3. $('#productHov').hover(function () {$("#product").show()},function () {
  4. setTimeout(function() {
  5. if(fls) {
  6. $("#product").hide()
  7. }
  8. }, 200)
  9. })
  10. $('#product').hover(function () {
  11. fls = false
  12. $("#product").show()
  13. },function () {
  14. fls = true
  15. $("#product").hide()
  16. })
  17. // 导航下划线
  18. $('.aus li').hover(function () {
  19. let i = $(this).index()
  20. $(".aus li").eq(i).addClass('tils')
  21. },function () {
  22. let i = $(this).index()
  23. $(".aus li").eq(i).removeClass('tils')
  24. })
  25. $('.auss li').hover(function () {
  26. let i = $(this).index()
  27. $(".auss li").eq(i).addClass('tils')
  28. },function () {
  29. let i = $(this).index()
  30. $(".auss li").eq(i).removeClass('tils')
  31. })
  32. // 智能系统管家模块的js效果
  33. let screenHeight = $(window).height()
  34. // 系统智能的高度
  35. let jiesaoTop = $('.jiesao').offset().top
  36. // 智能引擎的高度
  37. let znyqTop = $('.znyq').offset().top
  38. let fill = $('.fill').offset().top
  39. $(window).scroll(function () {
  40. // 当前滚动的高度
  41. let currentTop = $(window).scrollTop()
  42. if(currentTop < 2) {
  43. $('#all').removeClass('hanAll')
  44. $('#abc').addClass('abc')
  45. $("#loGo").attr("src", './image/logo.png')
  46. } else {
  47. $("#all").addClass("hanAll");
  48. $("#abc").removeClass("abc");
  49. $("#loGo").attr("src", './image/logo.jpg')
  50. }
  51. // 系统管理滚动计算
  52. if (currentTop > jiesaoTop && currentTop < (jiesaoTop + screenHeight)) {
  53. let jiesaoopacity = (currentTop - jiesaoTop) / screenHeight
  54. let jiesaopadding = (1 - jiesaoopacity) * 300 + 'px'
  55. $('#jiesaoP').css({'opacity': jiesaoopacity})
  56. $('#jiesaoImg').css({'padding-top': jiesaopadding})
  57. }
  58. // 智能引擎滚动计算
  59. if(currentTop > znyqTop && currentTop < (znyqTop + screenHeight) && currentTop < 3000) {
  60. let znyqTopopacity = (2900 - currentTop)
  61. let znyqToppadding = (znyqTopopacity - 1) * 1.15 + 'px'
  62. $('#znyqH').css({'transform':'translate(0,'+znyqToppadding+')'})
  63. }
  64. if(currentTop > znyqTop && currentTop < (znyqTop + screenHeight + 800) && currentTop > 2900) {
  65. let znyqTopopacityVal = (currentTop - znyqTop) / (screenHeight + 800)
  66. // 550的
  67. let znyqToppaddingfives = (1 - znyqTopopacityVal) * 550 + 'px'
  68. // 500的
  69. let znyqToppaddingfive = (1 - znyqTopopacityVal) * 500 + 'px'
  70. // 400的
  71. let znyqToppaddingfour = (1 - znyqTopopacityVal) * 400 + 'px'
  72. // 300的
  73. let znyqToppaddingthree = (1 - znyqTopopacityVal) * 300 + 'px'
  74. if(znyqTopopacityVal < 0.2) znyqTopopacityVal = 0
  75. $('#selMou1').css({'opacity': znyqTopopacityVal, 'transform':'translate(-'+znyqToppaddingfive+',-'+ znyqToppaddingfive +')'})
  76. $('#selMou2').css({'opacity': znyqTopopacityVal, 'transform':'translate(-'+znyqToppaddingfour+',-'+ znyqToppaddingfour +')'})
  77. $('#selMou3').css({'opacity': znyqTopopacityVal, 'transform':'translate(-'+znyqToppaddingfive+','+ znyqToppaddingfive +')'})
  78. $('#selMou4').css({'opacity': znyqTopopacityVal, 'transform':'translate(-'+znyqToppaddingfour+','+ znyqToppaddingfour +')'})
  79. $('#selMour1').css({'opacity': znyqTopopacityVal, 'transform':'translate('+znyqToppaddingthree+',-'+ znyqToppaddingthree +')'})
  80. $('#selMour2').css({'opacity': znyqTopopacityVal, 'transform':'translate('+znyqToppaddingfour+',-'+ znyqToppaddingfour +')'})
  81. $('#selMour3').css({'opacity': znyqTopopacityVal, 'transform':'translate('+znyqToppaddingfive+',-'+ znyqToppaddingfive +')'})
  82. $('#selMour4').css({'opacity': znyqTopopacityVal, 'transform':'translate('+znyqToppaddingfives+',-'+ znyqToppaddingfives +')'})
  83. $('#selMour5').css({'opacity': znyqTopopacityVal, 'transform':'translate('+znyqToppaddingthree+','+ znyqToppaddingthree +')'})
  84. $('#selMour6').css({'opacity': znyqTopopacityVal, 'transform':'translate('+znyqToppaddingfour+','+ znyqToppaddingfour +')'})
  85. $('#selMour7').css({'opacity': znyqTopopacityVal, 'transform':'translate('+znyqToppaddingfive+','+ znyqToppaddingfive +')'})
  86. $('#selMour8').css({'opacity': znyqTopopacityVal, 'transform':'translate('+znyqToppaddingfives+','+ znyqToppaddingfives +')'})
  87. }
  88. // 加样式
  89. // if(currentTop > fill - 300) {
  90. // $('#fillCon').addClass('fillCons')
  91. // }
  92. // if(currentTop < fill - 400){
  93. // $("#fillCon").removeClass("fillCons");
  94. // }
  95. })
  96. // tab点击
  97. $(function() {
  98. $('#tablTabUl li').click(function() {
  99. let index = $(this).index()
  100. var arr = $('#tablTabUl li')
  101. for(var i in arr) {
  102. $('#tablTabUl li').eq(i).find('img').attr("src", './image/ions/'+ (+i + 1)+'.1.png')
  103. $('#tablTabUl li').removeClass('tabOn')
  104. }
  105. $(this).addClass("tabOn")
  106. $(this).find('img').attr("src", './image/ions/'+(+index + 1)+'.png')
  107. $('#finImg').attr("src", './image/gs'+(+index + 1)+'.jpg')
  108. })
  109. })
  110. // 客服hover
  111. $('#zhixun').hover(function () {
  112. $("#zhixun").show()
  113. $("#consultigImg").attr("src", './image/ions/kefu1.png')
  114. },function () {
  115. $("#zhixun").hide()
  116. $("#consultigImg").attr("src", './image/ions/kefu2.png')
  117. })
  118. $('#consulting').hover(function () {
  119. $("#zhixun").show()
  120. $("#consultigImg").attr("src", './image/ions/kefu1.png')
  121. },function () {
  122. $("#zhixun").hide()
  123. $("#consultigImg").attr("src", './image/ions/kefu2.png')
  124. })
  125. let nums = 0
  126. // 客户点击
  127. $(function() {
  128. kehuFlg()
  129. $('#kehuLeft').click(function() {
  130. if(nums > 0 ) {
  131. nums--
  132. let conImgLeft = $('.conImg').css('left')
  133. let num = conImgLeft.replace("px","");
  134. console.log(num, '值')
  135. $('.conImg').animate({
  136. 'left': (+num + 510) + 'px'
  137. }, 400)
  138. kehuFlg()
  139. }
  140. })
  141. $('#kehuRight').click(function() {
  142. if(nums < 5) {
  143. nums++
  144. console.log('执行')
  145. let conImgLeft = $('.conImg').css('left')
  146. let num = conImgLeft.replace("px","");
  147. console.log(num, '值')
  148. $('.conImg').animate({
  149. 'left': (+num - 510) + 'px'
  150. }, 400)
  151. kehuFlg()
  152. }
  153. })
  154. })
  155. function kehuFlg() {
  156. console.log(nums)
  157. if(nums == 0) {
  158. $('#kehuLeft').find('img').attr("src", './image/ions/zuos.png')
  159. $('#kehuLeft').addClass("zhis")
  160. } else {
  161. $('#kehuLeft').find('img').attr("src", './image/ions/zuo.png')
  162. $('#kehuLeft').removeClass("zhis")
  163. }
  164. if(nums >= 5) {
  165. $('#kehuRight').find('img').attr("src", './image/ions/yous.png')
  166. $('#kehuRight').addClass("zhis")
  167. } else {
  168. $('#kehuRight').find('img').attr("src", './image/ions/you.png')
  169. $('#kehuRight').removeClass("zhis")
  170. }
  171. }