测试

js/index.js

@@ -1,4 +1,55 @@
 $(function () {
+  // ============================================
+  // 滚动动画效果 - Intersection Observer
+  // ============================================
+  function initScrollAnimations() {
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('animated');
+          // 一次性动画，触发后不再观察
+          observer.unobserve(entry.target);
+        }
+      });
+    }, observerOptions);
+
+    // 为所有section添加滚动动画
+    document.querySelectorAll('.section').forEach((section, index) => {
+      section.classList.add('animate-on-scroll');
+      observer.observe(section);
+    });
+
+    // 为服务卡片添加延迟动画
+    document.querySelectorAll('.service-box').forEach((box, index) => {
+      box.classList.add('animate-on-scroll', `delay-${(index % 3) + 1}`);
+      observer.observe(box);
+    });
+
+    // 为解决方案卡片添加动画
+    document.querySelectorAll('.resolve-box').forEach((box, index) => {
+      box.classList.add('animate-on-scroll', `delay-${(index % 4) + 1}`);
+      observer.observe(box);
+    });
+
+    // 为新闻列表添加动画
+    document.querySelectorAll('.news-cont').forEach(cont => {
+      cont.classList.add('scale-on-scroll');
+      observer.observe(cont);
+    });
+  }
+
+  // 页面加载完成后初始化动画
+  setTimeout(initScrollAnimations, 100);
+
+  // ============================================
+  // 原有功能代码
+  // ============================================
+
   // 获取url地址栏参数函数
   function getUrlParams() {
     const url = window.location.href;
@@ -85,114 +136,114 @@ $(function () {
   }
   // 获取首页数据
   getCommentInfo();
-  var viewer = new Viewer(document.getElementById("viewer"), {
+  var viewer = new Viewer(document.getElementById("viewer"), {
-    button: true,
+    button: true,
-    inline: false,
+    inline: false,
-    zoomable: true,
+    zoomable: true,
-    title: true,
+    title: true,
-    tooltip: true,
+    tooltip: true,
-    minZoomRatio: 0.5,
+    minZoomRatio: 0.5,
-    maxZoomRatio: 100,
+    maxZoomRatio: 100,
-    movable: true,
+    movable: true,
-    interval: 2000,
+    interval: 2000,
-    navbar: true,
+    navbar: true,
-    loading: true,
+    loading: true,
-  });
+  });
-
+
   // 点击显示图片
   $(".cert-item,.practice-box,.brand-box").click(function () {
     // 设置图片
     $("#viewer").attr("src", $(this).find("img").attr("src"));
     viewer.show();
   });
-  function formateTimeFun(time) {
+  function formateTimeFun(time) {
-    const date = new Date(time * 1000);
+    const date = new Date(time * 1000);
-    Y = date.getFullYear() + "-";
+    Y = date.getFullYear() + "-";
-    M =
+    M =
-      (date.getMonth() + 1 < 10
+      (date.getMonth() + 1 < 10
-        ? "0" + (date.getMonth() + 1)
+        ? "0" + (date.getMonth() + 1)
-        : date.getMonth() + 1) + "-";
+        : date.getMonth() + 1) + "-";
-    D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+    D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-    return Y + M + D;
+    return Y + M + D;
-  }
+  }
   // 公告列表
-  function getAnnounceList() {
+  function getAnnounceList() {
-    $.ajax({
+    $.ajax({
-      url: "/console/v1/announcement",
+      url: "/console/v1/announcement",
-      method: "get",
+      method: "get",
-      data: {
+      data: {
-        page: 1,
+        page: 1,
-        limit: 5,
+        limit: 5,
-      },
+      },
-      success: function (res) {
+      success: function (res) {
-        const announceList = res.data.list;
+        const announceList = res.data.list;
-        announceList.forEach((item, index) => {
+        announceList.forEach((item, index) => {
-          $("#announceList").append(`      
+          $("#announceList").append(`      
-          <div class="news-item">
+          <div class="news-item">
-          <div class="fboxRow Ycenter">
+          <div class="fboxRow Ycenter">
-            <div class="number">${index + 1}</div>
+            <div class="number">${index + 1}</div>
-            <a href="./announce-details.html?id=${item.id}">
+            <a href="./announce-details.html?id=${item.id}">
-              <div class="title font-ell1">${item.title}</div>
+              <div class="title font-ell1">${item.title}</div>
-            </a>
+            </a>
-          </div>
+          </div>
-          <div class="time">${formateTimeFun(item.create_time)}</div>
+          <div class="time">${formateTimeFun(item.create_time)}</div>
-        </div>
+        </div>
-           `);
+           `);
-        });
+        });
-      },
+      },
-    });
+    });
-  }
+  }
-  getAnnounceList();
+  getAnnounceList();
-  // 新闻列表
+  // 新闻列表
-  function getNewsList() {
+  function getNewsList() {
-    $.ajax({
+    $.ajax({
-      url: "/console/v1/news",
+      url: "/console/v1/news",
-      method: "get",
+      method: "get",
-      data: {
+      data: {
-        page: 1,
+        page: 1,
-        limit: 5,
+        limit: 5,
-      },
+      },
-      success: function (res) {
+      success: function (res) {
-        const announceList = res.data.list;
+        const announceList = res.data.list;
-        announceList.forEach((item, index) => {
+        announceList.forEach((item, index) => {
-          $("#newsList").append(`      
+          $("#newsList").append(`      
-          <div class="news-item">
+          <div class="news-item">
-          <div class="fboxRow Ycenter">
+          <div class="fboxRow Ycenter">
-            <div class="number">${index + 1}</div>
+            <div class="number">${index + 1}</div>
-            <a href="./news-details.html?id=${item.id}">
+            <a href="./news-details.html?id=${item.id}">
-              <div class="title font-ell1">${item.title}</div>
+              <div class="title font-ell1">${item.title}</div>
-            </a>
+            </a>
-          </div>
+          </div>
-          <div class="time">${formateTimeFun(item.create_time)}</div>
+          <div class="time">${formateTimeFun(item.create_time)}</div>
-        </div>
+        </div>
-           `);
+           `);
-        });
+        });
-      },
+      },
-    });
+    });
-  }
+  }
-  getNewsList();
+  getNewsList();
-
+
-  $("#myTabs a").click(function (e) {
+  $("#myTabs a").click(function (e) {
-    e.preventDefault();
+    e.preventDefault();
-    $(this).tab("show");
+    $(this).tab("show");
-  });
+  });
-  // 跳转函数
+  // 跳转函数
-  function goOtherPage(url) {
+  function goOtherPage(url) {
-    location.href = url;
+    location.href = url;
-  }
+  }
-  $("#cloud-box").click(function () {
+  $("#cloud-box").click(function () {
-    location.href = "cloud.html";
+    location.href = "cloud.html";
-  });
+  });
-  $("#domain-box").click(function () {
+  $("#domain-box").click(function () {
-    location.href = "domain.html";
+    location.href = "domain.html";
-  });
+  });
-  $("#recomment-box").click(function () {
+  $("#recomment-box").click(function () {
-    location.href = "/home.htm";
+    location.href = "/home.htm";
-  });
+  });
-  $("#logon-box").click(function () {
+  $("#logon-box").click(function () {
-    location.href = "/regist.htm";
+    location.href = "/regist.htm";
-  });
+  });
-  $("#cps-box").click(function () {
+  $("#cps-box").click(function () {
-    location.href = "partner/cps.html";
+    location.href = "partner/cps.html";
-  });
+  });
-});
+});