project.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. // 屏幕试图的高度
  2. let screenHeight = $(window).height()
  3. console.log(screenHeight)
  4. // 获取团队协作的高度
  5. let collaborationTeamHeight = $('#collaborationTeam').offset().top
  6. // 获取项目模板的高度
  7. let templateProjectHeight = $('#templateProject').offset().top
  8. $(window).scroll(function () {
  9. // 当前滚动的高度
  10. let currentTop = $(window).scrollTop()
  11. if(currentTop < 2) {
  12. $('#all').removeClass('hanAll')
  13. $('#abc').addClass('abc')
  14. // $("#loGo").attr("src", './image/logo.png')
  15. } else {
  16. $("#all").addClass("hanAll");
  17. $("#abc").removeClass("abc");
  18. // $("#loGo").attr("src", './image/logo.jpg')
  19. }
  20. // 团队协作滚动计算
  21. if(currentTop > collaborationTeamHeight && currentTop < (collaborationTeamHeight + screenHeight)) {
  22. let teamOffset = (currentTop - collaborationTeamHeight) / screenHeight
  23. console.log(teamOffset, '值')
  24. $('#collCentImg').css({'transform': `translate(${(1 - teamOffset) * 250}px,0)`})
  25. $('#collCentFonts').css({'transform': `translate(-${(1 - teamOffset) * 550}px,0)`})
  26. }
  27. // 项目模板的计算
  28. if(currentTop > templateProjectHeight && currentTop < (templateProjectHeight + screenHeight)) {
  29. let teamOffset = (currentTop - templateProjectHeight) / screenHeight
  30. console.log(teamOffset, '值')
  31. $('#templatOne').css({'transform': `translate(${(1 - teamOffset) * 500}px,0)`})
  32. $('#templatFour').css({'transform': `translate(-${(1 - teamOffset) * 600}px,0)`})
  33. $('#templatThree').css({'transform': `translate(0, ${(1 - teamOffset) * 500}px)`})
  34. }
  35. })
  36. // 导航下划线
  37. $('.aus li').hover(function () {
  38. let i = $(this).index()
  39. $(".aus li").eq(i).addClass('tils')
  40. },function () {
  41. let i = $(this).index()
  42. $(".aus li").eq(i).removeClass('tils')
  43. })
  44. $('.auss li').hover(function () {
  45. let i = $(this).index()
  46. $(".auss li").eq(i).addClass('tils')
  47. },function () {
  48. let i = $(this).index()
  49. $(".auss li").eq(i).removeClass('tils')
  50. })
  51. // 客服hover
  52. $('#zhixun').hover(function () {
  53. $("#zhixun").show()
  54. $("#consultigImg").attr("src", './image/ions/kefu1.png')
  55. },function () {
  56. $("#zhixun").hide()
  57. $("#consultigImg").attr("src", './image/ions/kefu2.png')
  58. })
  59. $('#consulting').hover(function () {
  60. $("#zhixun").show()
  61. $("#consultigImg").attr("src", './image/ions/kefu1.png')
  62. },function () {
  63. $("#zhixun").hide()
  64. $("#consultigImg").attr("src", './image/ions/kefu2.png')
  65. })
  66. // 产品鼠标移入移出
  67. let fls = true
  68. $('#productHov').hover(function () {$("#product").show()},function () {
  69. setTimeout(function() {
  70. if(fls) {
  71. $("#product").hide()
  72. }
  73. }, 200)
  74. })
  75. $('#product').hover(function () {
  76. fls = false
  77. $("#product").show()
  78. },function () {
  79. fls = true
  80. $("#product").hide()
  81. })
  82. // 用户评价点击事件
  83. let numberClick = 0
  84. // 移动的距离
  85. let mobiledistance = 0
  86. $(function() {
  87. kehuFlg()
  88. $('#kehuRight').click(function() {
  89. if(numberClick < 3) {
  90. numberClick++
  91. zuoyouClick()
  92. }
  93. })
  94. $('#kehuLeft').click(function() {
  95. if(numberClick > 0 && numberClick <= 3) {
  96. numberClick--
  97. zuoyouClick()
  98. }
  99. })
  100. })
  101. function zuoyouClick() {
  102. console.log(numberClick)
  103. mobiledistance = '-' + (numberClick * 396) + 'px'
  104. $('.userEvaluationRight').stop(true,false).animate({
  105. 'left': mobiledistance
  106. }, 400)
  107. kehuFlg()
  108. }
  109. function kehuFlg() {
  110. if(numberClick == 0) {
  111. $('#kehuLeft').find('img').attr("src", './image/ions/zuos.png')
  112. $('#kehuLeft').addClass("zhis")
  113. } else {
  114. $('#kehuLeft').find('img').attr("src", './image/ions/zuo.png')
  115. $('#kehuLeft').removeClass("zhis")
  116. }
  117. if(numberClick >= 3) {
  118. $('#kehuRight').find('img').attr("src", './image/ions/yous.png')
  119. $('#kehuRight').addClass("zhis")
  120. } else {
  121. $('#kehuRight').find('img').attr("src", './image/ions/you.png')
  122. $('#kehuRight').removeClass("zhis")
  123. }
  124. }