817df58b69
All checks were successful
continuous-integration/drone/push Build is passing
- 当前卡片在最前面，完全显示 - 后面3张卡片依次堆叠，露出顶部边缘 - 使用 scale 和 translateY 制造深度感 - 堆叠卡片透明度和亮度递减，形成视觉层次 - 切换时当前卡片滑出，新卡片从右侧滑入最前面 - 其他卡片自动更新堆叠位置 - 添加 perspective 增强3D效果 - 容器底部增加 padding 防止堆叠卡片被裁剪 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
382 lines
11 KiB
JavaScript
382 lines
11 KiB
JavaScript
$(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;
|
|
// 判断是否有参数
|
|
if (url.indexOf("?") === -1) {
|
|
return {};
|
|
}
|
|
const params = url.split("?")[1];
|
|
const paramsArr = params.split("&");
|
|
const paramsObj = {};
|
|
paramsArr.forEach((item) => {
|
|
const key = item.split("=")[0];
|
|
const value = item.split("=")[1];
|
|
// 解析中文
|
|
paramsObj[key] = decodeURI(value);
|
|
});
|
|
return paramsObj;
|
|
}
|
|
//设置cookie
|
|
function setCookie(c_name, value, expiredays = 1) {
|
|
const exdate = new Date();
|
|
exdate.setDate(exdate.getDate() + expiredays);
|
|
document.cookie =
|
|
c_name + "=" + value + (";expires=" + exdate.toGMTString());
|
|
}
|
|
// 判断首页是否为推荐页面
|
|
function isRecommend() {
|
|
const urlParams = getUrlParams();
|
|
if (urlParams.recommend_c) {
|
|
setCookie("recommend_c", urlParams.recommend_c);
|
|
}
|
|
}
|
|
isRecommend();
|
|
// 设置首页函数
|
|
function setIndexData(commentObj) {
|
|
// 荣誉资质
|
|
if (commentObj.honor && commentObj.honor.length > 0) {
|
|
commentObj.honor.forEach((item) => {
|
|
$("#certBox").append(`<div class="cert-item">
|
|
<img src=${item.img} alt="">
|
|
<p class="mt-20">${item.name}</p>
|
|
</div>`);
|
|
});
|
|
}
|
|
// 合作伙伴
|
|
if (commentObj.partner && commentObj.partner.length > 0) {
|
|
if (commentObj.partner.length <= 3) {
|
|
commentObj.partner.forEach((item) => {
|
|
$("#practiceBox").append(`<div class="practice-box">
|
|
<img src="${item.img}" alt="">
|
|
<div class="mt-10">${item.description}</div>
|
|
<p class="tr font-grey mt-20 font12">${item.name}</p>
|
|
</div>`);
|
|
});
|
|
} else {
|
|
const arr1 = commentObj.partner.slice(0, 3);
|
|
const arr2 = commentObj.partner.slice(3);
|
|
arr1.forEach((item) => {
|
|
$("#practiceBox").append(`<div class="practice-box">
|
|
<img src="${item.img}" alt="">
|
|
<div class="mt-10">${item.description}</div>
|
|
<p class="tr font-grey mt-20 font12">${item.name}</p>
|
|
</div>`);
|
|
});
|
|
$("#morPracticeBox").attr("style", "display: flex;");
|
|
arr2.forEach((item) => {
|
|
$("#morPracticeBox").append(` <div class="brand-box">
|
|
<img src="${item.img}" alt="">
|
|
</div>`);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
// 获取通用配置信息
|
|
function getCommentInfo() {
|
|
$.ajax({
|
|
url: "/console/v1/common",
|
|
method: "get",
|
|
headers: {
|
|
Authorization: "Bearer" + " " + localStorage.jwt,
|
|
},
|
|
success: function (res) {
|
|
sessionStorage.commentData = JSON.stringify(res.data);
|
|
setIndexData(res.data);
|
|
},
|
|
});
|
|
}
|
|
// 获取首页数据 - 优先使用 SSR 注入的数据
|
|
if (window.__themeCommon) {
|
|
// 如果有 SSR 数据，直接使用
|
|
setIndexData(window.__themeCommon);
|
|
} else if (sessionStorage.commentData) {
|
|
// 如果有缓存数据，使用缓存
|
|
setIndexData(JSON.parse(sessionStorage.commentData));
|
|
} else {
|
|
// 否则通过 AJAX 获取
|
|
getCommentInfo();
|
|
}
|
|
var viewer = new Viewer(document.getElementById("viewer"), {
|
|
button: true,
|
|
inline: false,
|
|
zoomable: true,
|
|
title: true,
|
|
tooltip: true,
|
|
minZoomRatio: 0.5,
|
|
maxZoomRatio: 100,
|
|
movable: true,
|
|
interval: 2000,
|
|
navbar: true,
|
|
loading: true,
|
|
});
|
|
|
|
// 点击显示图片
|
|
$(".cert-item,.practice-box,.brand-box").click(function () {
|
|
// 设置图片
|
|
$("#viewer").attr("src", $(this).find("img").attr("src"));
|
|
viewer.show();
|
|
});
|
|
function formateTimeFun(time) {
|
|
const date = new Date(time * 1000);
|
|
Y = date.getFullYear() + "-";
|
|
M =
|
|
(date.getMonth() + 1 < 10
|
|
? "0" + (date.getMonth() + 1)
|
|
: date.getMonth() + 1) + "-";
|
|
D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
|
return Y + M + D;
|
|
}
|
|
// 公告列表
|
|
function getAnnounceList() {
|
|
$.ajax({
|
|
url: "/console/v1/announcement",
|
|
method: "get",
|
|
data: {
|
|
page: 1,
|
|
limit: 5,
|
|
},
|
|
success: function (res) {
|
|
const announceList = res.data.list;
|
|
announceList.forEach((item, index) => {
|
|
$("#announceList").append(`
|
|
<div class="news-item">
|
|
<div class="fboxRow Ycenter">
|
|
<div class="number">${index + 1}</div>
|
|
<a href="./announce-details.html?id=${item.id}">
|
|
<div class="title font-ell1">${item.title}</div>
|
|
</a>
|
|
</div>
|
|
<div class="time">${formateTimeFun(item.create_time)}</div>
|
|
</div>
|
|
`);
|
|
});
|
|
},
|
|
});
|
|
}
|
|
getAnnounceList();
|
|
// 新闻列表
|
|
function getNewsList() {
|
|
$.ajax({
|
|
url: "/console/v1/news",
|
|
method: "get",
|
|
data: {
|
|
page: 1,
|
|
limit: 5,
|
|
},
|
|
success: function (res) {
|
|
const announceList = res.data.list;
|
|
announceList.forEach((item, index) => {
|
|
$("#newsList").append(`
|
|
<div class="news-item">
|
|
<div class="fboxRow Ycenter">
|
|
<div class="number">${index + 1}</div>
|
|
<a href="./news-details.html?id=${item.id}">
|
|
<div class="title font-ell1">${item.title}</div>
|
|
</a>
|
|
</div>
|
|
<div class="time">${formateTimeFun(item.create_time)}</div>
|
|
</div>
|
|
`);
|
|
});
|
|
},
|
|
});
|
|
}
|
|
getNewsList();
|
|
|
|
$("#myTabs a").click(function (e) {
|
|
e.preventDefault();
|
|
$(this).tab("show");
|
|
});
|
|
// 跳转函数
|
|
function goOtherPage(url) {
|
|
location.href = url;
|
|
}
|
|
$("#cloud-box").click(function () {
|
|
location.href = "cloud.html";
|
|
});
|
|
$("#domain-box").click(function () {
|
|
location.href = "domain.html";
|
|
});
|
|
$("#recomment-box").click(function () {
|
|
location.href = "/home.htm";
|
|
});
|
|
$("#logon-box").click(function () {
|
|
location.href = "/regist.htm";
|
|
});
|
|
$("#cps-box").click(function () {
|
|
location.href = "partner/cps.html";
|
|
});
|
|
|
|
// ============================================
|
|
// 全场景全栈解决方案 - 幻灯片功能
|
|
// ============================================
|
|
|
|
(function () {
|
|
const $tabs = $('.solution-tab');
|
|
const $slides = $('.solution-slide');
|
|
const totalSlides = $slides.length;
|
|
let currentIndex = 0;
|
|
let autoPlayTimer = null;
|
|
let isAnimating = false;
|
|
const autoPlayDuration = 3000; // 3秒自动切换
|
|
|
|
// 更新所有幻灯片的堆叠状态
|
|
function updateStackStates() {
|
|
$slides.each(function(index) {
|
|
const $slide = $(this);
|
|
|
|
// 移除所有堆叠类
|
|
$slide.removeClass('stack-1 stack-2 stack-3');
|
|
|
|
// 如果不是当前激活的，且不在动画中
|
|
if (index !== currentIndex && !$slide.hasClass('leaving') && !$slide.hasClass('entering')) {
|
|
// 计算相对于当前索引的位置
|
|
let offset = index - currentIndex;
|
|
if (offset < 0) offset += totalSlides;
|
|
|
|
// 只显示后面3张卡片的堆叠效果
|
|
if (offset === 1) {
|
|
$slide.addClass('stack-1');
|
|
} else if (offset === 2) {
|
|
$slide.addClass('stack-2');
|
|
} else if (offset === 3) {
|
|
$slide.addClass('stack-3');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 切换到指定幻灯片
|
|
function switchSlide(index) {
|
|
if (index === currentIndex || isAnimating) return;
|
|
|
|
isAnimating = true;
|
|
|
|
const $currentSlide = $slides.eq(currentIndex);
|
|
const $nextSlide = $slides.eq(index);
|
|
|
|
// 移除所有动画类和堆叠类
|
|
$slides.removeClass('leaving entering stack-1 stack-2 stack-3');
|
|
|
|
// 添加离开和进入动画
|
|
$currentSlide.addClass('leaving');
|
|
$nextSlide.addClass('entering');
|
|
|
|
// 更新按钮
|
|
$tabs.removeClass('active');
|
|
$tabs.eq(index).addClass('active');
|
|
|
|
// 等待动画完成
|
|
setTimeout(function () {
|
|
// 移除旧的 active 类
|
|
$currentSlide.removeClass('active leaving');
|
|
|
|
// 添加新的 active 类
|
|
$nextSlide.addClass('active').removeClass('entering');
|
|
|
|
currentIndex = index;
|
|
|
|
// 更新堆叠状态
|
|
updateStackStates();
|
|
|
|
isAnimating = false;
|
|
}, 800); // 与 CSS 动画时间一致
|
|
}
|
|
|
|
// 切换到下一张
|
|
function nextSlide() {
|
|
const nextIndex = (currentIndex + 1) % totalSlides;
|
|
switchSlide(nextIndex);
|
|
}
|
|
|
|
// 启动自动播放
|
|
function startAutoPlay() {
|
|
stopAutoPlay();
|
|
autoPlayTimer = setInterval(nextSlide, autoPlayDuration);
|
|
}
|
|
|
|
// 停止自动播放
|
|
function stopAutoPlay() {
|
|
if (autoPlayTimer) {
|
|
clearInterval(autoPlayTimer);
|
|
autoPlayTimer = null;
|
|
}
|
|
}
|
|
|
|
// 按钮点击事件
|
|
$tabs.on('click', function () {
|
|
const index = $(this).data('index');
|
|
switchSlide(index);
|
|
startAutoPlay();
|
|
});
|
|
|
|
// 鼠标悬停时暂停自动播放
|
|
$('.solution-wrapper').on('mouseenter', function () {
|
|
stopAutoPlay();
|
|
});
|
|
|
|
// 鼠标离开时恢复自动播放
|
|
$('.solution-wrapper').on('mouseleave', function () {
|
|
startAutoPlay();
|
|
});
|
|
|
|
// 初始化
|
|
if (totalSlides > 0) {
|
|
updateStackStates();
|
|
startAutoPlay();
|
|
}
|
|
})();
|
|
});
|