8cb6d0cdc9
All checks were successful
continuous-integration/drone/push Build is passing
- 中间显示主卡片，完整展示内容 - 左右两侧显示相邻卡片的部分预览（缩小85%，半透明） - 切换时右侧卡片滑动到中间成为主卡片 - 同时中间卡片滑动到左侧成为预览 - 左侧卡片向左消失，新的右侧卡片从右边进入 - 所有卡片同步移动，形成流畅的轮播效果 - 动画时长0.6s，使用 cubic-bezier 缓动 - 保持自动播放和交互功能 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
390 lines
11 KiB
JavaScript
390 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 getCircularIndex(index) {
|
|
return ((index % totalSlides) + totalSlides) % totalSlides;
|
|
}
|
|
|
|
// 更新所有幻灯片的位置状态（左中右）
|
|
function updateSlidePositions() {
|
|
const prevIndex = getCircularIndex(currentIndex - 1);
|
|
const nextIndex = getCircularIndex(currentIndex + 1);
|
|
|
|
$slides.each(function(index) {
|
|
const $slide = $(this);
|
|
|
|
// 移除所有位置类
|
|
$slide.removeClass('active prev next slide-to-center slide-to-left slide-out-left slide-in-right');
|
|
|
|
if (index === currentIndex) {
|
|
// 中间主卡片
|
|
$slide.addClass('active');
|
|
} else if (index === prevIndex) {
|
|
// 左侧预览卡片
|
|
$slide.addClass('prev');
|
|
} else if (index === nextIndex) {
|
|
// 右侧预览卡片
|
|
$slide.addClass('next');
|
|
}
|
|
// 其他卡片保持隐藏状态
|
|
});
|
|
}
|
|
|
|
// 切换到指定幻灯片
|
|
function switchSlide(index) {
|
|
if (index === currentIndex || isAnimating) return;
|
|
|
|
isAnimating = true;
|
|
|
|
const oldIndex = currentIndex;
|
|
const newIndex = index;
|
|
const prevOldIndex = getCircularIndex(oldIndex - 1);
|
|
const nextNewIndex = getCircularIndex(newIndex + 1);
|
|
|
|
// 移除所有动画类
|
|
$slides.removeClass('slide-to-center slide-to-left slide-out-left slide-in-right');
|
|
|
|
// 应用切换动画
|
|
// 右侧卡片 -> 中间
|
|
$slides.eq(newIndex).removeClass('next').addClass('slide-to-center');
|
|
|
|
// 中间卡片 -> 左侧
|
|
$slides.eq(oldIndex).removeClass('active').addClass('slide-to-left');
|
|
|
|
// 左侧卡片 -> 消失
|
|
$slides.eq(prevOldIndex).removeClass('prev').addClass('slide-out-left');
|
|
|
|
// 新的右侧卡片进入
|
|
$slides.eq(nextNewIndex).addClass('slide-in-right');
|
|
|
|
// 更新按钮
|
|
$tabs.removeClass('active');
|
|
$tabs.eq(newIndex).addClass('active');
|
|
|
|
// 更新当前索引
|
|
currentIndex = newIndex;
|
|
|
|
// 等待动画完成后更新状态
|
|
setTimeout(function() {
|
|
updateSlidePositions();
|
|
isAnimating = false;
|
|
}, 600); // 与动画时间一致
|
|
}
|
|
|
|
// 切换到下一张
|
|
function nextSlide() {
|
|
const nextIndex = getCircularIndex(currentIndex + 1);
|
|
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) {
|
|
updateSlidePositions();
|
|
startAutoPlay();
|
|
}
|
|
})();
|
|
});
|