project.js 3.9 KB

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