424 lines
14 KiB
JavaScript
424 lines
14 KiB
JavaScript
|
$(document).ready(function() {
|
||
|
|
// 页面滚动动画
|
||
|
|
function checkVisibility() {
|
||
|
|
$('.page').each(function(index) {
|
||
|
|
const elementTop = $(this).offset().top;
|
||
|
|
const elementBottom = elementTop + $(this).outerHeight();
|
||
|
|
const viewportTop = $(window).scrollTop();
|
||
|
|
const viewportBottom = viewportTop + $(window).height();
|
||
|
|
|
||
|
|
// 当元素进入视口时添加visible类
|
||
|
|
if (elementBottom > viewportTop && elementTop < viewportBottom) {
|
||
|
|
$(this).addClass('visible');
|
||
|
|
|
||
|
|
// 更新滚动指示器
|
||
|
|
$('.scroll-dot').removeClass('active');
|
||
|
|
$('.scroll-dot[data-page="' + (index + 1) + '"]').addClass('active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始检查
|
||
|
|
checkVisibility();
|
||
|
|
|
||
|
|
// 滚动时检查
|
||
|
|
$(window).scroll(function() {
|
||
|
|
checkVisibility();
|
||
|
|
});
|
||
|
|
|
||
|
|
// 平滑滚动
|
||
|
|
$('nav a, .scroll-dot').on('click', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
let targetId;
|
||
|
|
if ($(this).hasClass('scroll-dot')) {
|
||
|
|
const pageNum = $(this).data('page');
|
||
|
|
targetId = '.page-' + pageNum;
|
||
|
|
} else {
|
||
|
|
targetId = $(this).attr('href');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (targetId === '#') {
|
||
|
|
$('html, body').animate({
|
||
|
|
scrollTop: 0
|
||
|
|
}, 800);
|
||
|
|
} else {
|
||
|
|
const targetOffset = $(targetId).offset().top;
|
||
|
|
$('html, body').animate({
|
||
|
|
scrollTop: targetOffset
|
||
|
|
}, 800);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 更新活动链接
|
||
|
|
$('nav a').removeClass('active');
|
||
|
|
$(this).addClass('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
// 云朵随机动画
|
||
|
|
$('.cloud').each(function() {
|
||
|
|
const randomDuration = Math.floor(Math.random() * 20) + 30; // 30-50秒
|
||
|
|
const randomDelay = Math.floor(Math.random() * 10); // 0-10秒
|
||
|
|
|
||
|
|
$(this).css({
|
||
|
|
'animation-duration': randomDuration + 's',
|
||
|
|
'animation-delay': randomDelay + 's'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 模块卡片动画
|
||
|
|
$('.module').hover(
|
||
|
|
function() {
|
||
|
|
$(this).find('.module-icon').css('transform', 'scale(1.2) rotate(10deg)');
|
||
|
|
},
|
||
|
|
function() {
|
||
|
|
$(this).find('.module-icon').css('transform', 'scale(1) rotate(0)');
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
// 首页自动显示
|
||
|
|
$('.page-1').addClass('visible');
|
||
|
|
|
||
|
|
// 添加鼠标跟随效果
|
||
|
|
$(document).mousemove(function(e) {
|
||
|
|
const mouseX = e.pageX;
|
||
|
|
const mouseY = e.pageY;
|
||
|
|
|
||
|
|
// 装饰元素跟随鼠标轻微移动
|
||
|
|
$('.star-decoration').css({
|
||
|
|
'transform': `translate(${(mouseX - $(window).width()/2) / 50}px, ${(mouseY - $(window).height()/2) / 50}px)`
|
||
|
|
});
|
||
|
|
|
||
|
|
// 云朵跟随鼠标轻微移动
|
||
|
|
$('.cloud').each(function(index) {
|
||
|
|
const factor = (index + 1) * 20;
|
||
|
|
$(this).css({
|
||
|
|
'margin-left': `${(mouseX - $(window).width()/2) / factor}px`,
|
||
|
|
'margin-top': `${(mouseY - $(window).height()/2) / factor}px`
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 浮动元素跟随鼠标
|
||
|
|
$('.floating-element').each(function(index) {
|
||
|
|
const factor = (index + 1) * 15;
|
||
|
|
$(this).css({
|
||
|
|
'transform': `translate(${(mouseX - $(window).width()/2) / factor}px, ${(mouseY - $(window).height()/2) / factor}px)`
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 添加滚动进度指示器
|
||
|
|
$('<div class="scroll-progress"></div>').appendTo('body');
|
||
|
|
$(window).scroll(function() {
|
||
|
|
const scrollTop = $(window).scrollTop();
|
||
|
|
const docHeight = $(document).height();
|
||
|
|
const winHeight = $(window).height();
|
||
|
|
const scrollPercent = (scrollTop) / (docHeight - winHeight) * 100;
|
||
|
|
$('.scroll-progress').css('width', scrollPercent + '%');
|
||
|
|
});
|
||
|
|
|
||
|
|
// 特性图片动画
|
||
|
|
$('.feature-image').each(function(index) {
|
||
|
|
$(this).css({
|
||
|
|
'animation-delay': (index * 0.2) + 's'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 学员反馈轮播
|
||
|
|
let testimonialIndex = 0;
|
||
|
|
const testimonials = $('.testimonial');
|
||
|
|
|
||
|
|
function showNextTestimonial() {
|
||
|
|
testimonials.removeClass('active');
|
||
|
|
testimonialIndex = (testimonialIndex + 1) % testimonials.length;
|
||
|
|
testimonials.eq(testimonialIndex).addClass('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始显示第一个
|
||
|
|
testimonials.eq(0).addClass('active');
|
||
|
|
|
||
|
|
// 每5秒切换一次
|
||
|
|
setInterval(showNextTestimonial, 5000);
|
||
|
|
|
||
|
|
// 添加CSS动画类
|
||
|
|
setTimeout(function() {
|
||
|
|
$('.hero-section h1').addClass('animate__animated animate__fadeInDown');
|
||
|
|
$('.hero-section p').addClass('animate__animated animate__fadeInUp');
|
||
|
|
$('.hero-buttons .btn').addClass('animate__animated animate__bounceIn');
|
||
|
|
}, 500);
|
||
|
|
|
||
|
|
// 全屏滚动增强 - 优化版本
|
||
|
|
let isScrolling = false;
|
||
|
|
let isbottom = false;
|
||
|
|
let currentPage = 0;
|
||
|
|
const totalPages = $('.page').length;
|
||
|
|
|
||
|
|
// 初始化页面
|
||
|
|
$('.page').eq(0).addClass('visible');
|
||
|
|
|
||
|
|
// 优化的鼠标滚轮事件处理
|
||
|
|
// $(window).on('wheel', function(e) {
|
||
|
|
// if(e.originalEvent.deltaY > 0 &¤tPage==totalPages-1){
|
||
|
|
// console.log("123");
|
||
|
|
// isbottom=true
|
||
|
|
// }else{
|
||
|
|
// e.preventDefault(); // 阻止默认滚动行为
|
||
|
|
|
||
|
|
// if (!isScrolling) {
|
||
|
|
// isScrolling = true;
|
||
|
|
|
||
|
|
// // 确定滚动方向
|
||
|
|
// if (e.originalEvent.deltaY > 0) {
|
||
|
|
// // 向下滚动
|
||
|
|
// if (currentPage < totalPages - 1) {
|
||
|
|
// currentPage++;
|
||
|
|
// }
|
||
|
|
// } else {
|
||
|
|
// if(isbottom){
|
||
|
|
// isbottom=false
|
||
|
|
// currentPage=totalPages-1
|
||
|
|
// }else{
|
||
|
|
// // 向上滚动
|
||
|
|
// if (currentPage > 0) {
|
||
|
|
// currentPage--;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
// }
|
||
|
|
|
||
|
|
// // 滚动到目标页面 - 使用更快的动画速度
|
||
|
|
// $('html, body').animate({
|
||
|
|
// scrollTop: $('.page').eq(currentPage).offset().top
|
||
|
|
// }, 500, 'easeOutQuint', function() {
|
||
|
|
// isScrolling = false;
|
||
|
|
// });
|
||
|
|
|
||
|
|
// // 更新滚动指示器
|
||
|
|
// $('.scroll-dot').removeClass('active');
|
||
|
|
// $('.scroll-dot[data-page="' + (currentPage + 1) + '"]').addClass('active');
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
// });
|
||
|
|
|
||
|
|
// 添加jQuery easing插件支持更平滑的动画
|
||
|
|
$.extend($.easing, {
|
||
|
|
easeOutQuint: function (x, t, b, c, d) {
|
||
|
|
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 点击滚动指示器
|
||
|
|
$('.scroll-dot').on('click', function() {
|
||
|
|
if (!isScrolling) {
|
||
|
|
isScrolling = true;
|
||
|
|
|
||
|
|
const targetPage = $(this).data('page') - 1;
|
||
|
|
currentPage = targetPage;
|
||
|
|
|
||
|
|
// 滚动到目标页面
|
||
|
|
$('html, body').animate({
|
||
|
|
scrollTop: $('.page').eq(targetPage).offset().top
|
||
|
|
}, 800, function() {
|
||
|
|
isScrolling = false;
|
||
|
|
});
|
||
|
|
|
||
|
|
// 更新滚动指示器
|
||
|
|
$('.scroll-dot').removeClass('active');
|
||
|
|
$(this).addClass('active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 键盘上下键控制
|
||
|
|
$(document).keydown(function(e) {
|
||
|
|
if (!isScrolling) {
|
||
|
|
if (e.keyCode === 40) { // 下箭头
|
||
|
|
if (currentPage < totalPages - 1) {
|
||
|
|
isScrolling = true;
|
||
|
|
currentPage++;
|
||
|
|
|
||
|
|
$('html, body').animate({
|
||
|
|
scrollTop: $('.page').eq(currentPage).offset().top
|
||
|
|
}, 800, function() {
|
||
|
|
isScrolling = false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.scroll-dot').removeClass('active');
|
||
|
|
$('.scroll-dot[data-page="' + (currentPage + 1) + '"]').addClass('active');
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
} else if (e.keyCode === 38) { // 上箭头
|
||
|
|
if (currentPage > 0) {
|
||
|
|
isScrolling = true;
|
||
|
|
currentPage--;
|
||
|
|
|
||
|
|
$('html, body').animate({
|
||
|
|
scrollTop: $('.page').eq(currentPage).offset().top
|
||
|
|
}, 800, function() {
|
||
|
|
isScrolling = false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.scroll-dot').removeClass('active');
|
||
|
|
$('.scroll-dot[data-page="' + (currentPage + 1) + '"]').addClass('active');
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 触摸屏滑动支持
|
||
|
|
let touchStartY = 0;
|
||
|
|
let touchEndY = 0;
|
||
|
|
|
||
|
|
$(document).on('touchstart', function(e) {
|
||
|
|
touchStartY = e.originalEvent.touches[0].clientY;
|
||
|
|
});
|
||
|
|
|
||
|
|
$(document).on('touchend', function(e) {
|
||
|
|
touchEndY = e.originalEvent.changedTouches[0].clientY;
|
||
|
|
handleSwipe();
|
||
|
|
});
|
||
|
|
|
||
|
|
function handleSwipe() {
|
||
|
|
if (!isScrolling) {
|
||
|
|
if (touchStartY - touchEndY > 50) { // 向上滑动
|
||
|
|
if (currentPage < totalPages - 1) {
|
||
|
|
isScrolling = true;
|
||
|
|
currentPage++;
|
||
|
|
|
||
|
|
$('html, body').animate({
|
||
|
|
scrollTop: $('.page').eq(currentPage).offset().top
|
||
|
|
}, 800, function() {
|
||
|
|
isScrolling = false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.scroll-dot').removeClass('active');
|
||
|
|
$('.scroll-dot[data-page="' + (currentPage + 1) + '"]').addClass('active');
|
||
|
|
}
|
||
|
|
} else if (touchEndY - touchStartY > 50) { // 向下滑动
|
||
|
|
if (currentPage > 0) {
|
||
|
|
isScrolling = true;
|
||
|
|
currentPage--;
|
||
|
|
|
||
|
|
$('html, body').animate({
|
||
|
|
scrollTop: $('.page').eq(currentPage).offset().top
|
||
|
|
}, 800, function() {
|
||
|
|
isScrolling = false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.scroll-dot').removeClass('active');
|
||
|
|
$('.scroll-dot[data-page="' + (currentPage + 1) + '"]').addClass('active');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始化滚动指示器
|
||
|
|
function updateScrollIndicator() {
|
||
|
|
const scrollTop = $(window).scrollTop();
|
||
|
|
$('.page').each(function(index) {
|
||
|
|
const offsetTop = $(this).offset().top;
|
||
|
|
const height = $(this).outerHeight();
|
||
|
|
|
||
|
|
if (scrollTop >= offsetTop - 100 && scrollTop < offsetTop + height - 100) {
|
||
|
|
currentPage = index;
|
||
|
|
$('.scroll-dot').removeClass('active');
|
||
|
|
$('.scroll-dot[data-page="' + (index + 1) + '"]').addClass('active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 滚动时更新指示器
|
||
|
|
$(window).scroll(function() {
|
||
|
|
if (!isScrolling) {
|
||
|
|
updateScrollIndicator();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 初始化
|
||
|
|
updateScrollIndicator();
|
||
|
|
});
|
||
|
|
//首页轮播
|
||
|
|
const carousel = document.getElementById('carousel');
|
||
|
|
const carouselItems = document.querySelectorAll('.carousel-item');
|
||
|
|
const indicators = document.querySelectorAll('.carousel-indicator');
|
||
|
|
const prevBtn = document.getElementById('prev-btn');
|
||
|
|
const nextBtn = document.getElementById('next-btn');
|
||
|
|
let currentIndex = 0;
|
||
|
|
let carouselInterval;
|
||
|
|
|
||
|
|
// 显示当前轮播项
|
||
|
|
function showSlide(index) {
|
||
|
|
// 隐藏所有轮播项
|
||
|
|
carouselItems.forEach(item => {
|
||
|
|
item.classList.remove('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
// 重置所有指示器
|
||
|
|
indicators.forEach(indicator => {
|
||
|
|
indicator.classList.remove('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
// 显示当前轮播项
|
||
|
|
carouselItems[index].classList.add('active');
|
||
|
|
|
||
|
|
// 激活当前指示器
|
||
|
|
indicators[index].classList.add('active');
|
||
|
|
|
||
|
|
currentIndex = index;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 下一张轮播图
|
||
|
|
function nextSlide() {
|
||
|
|
let newIndex = (currentIndex + 1) % carouselItems.length;
|
||
|
|
showSlide(newIndex);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 上一张轮播图
|
||
|
|
function prevSlide() {
|
||
|
|
let newIndex = (currentIndex - 1 + carouselItems.length) % carouselItems.length;
|
||
|
|
showSlide(newIndex);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 点击指示器切换轮播图
|
||
|
|
indicators.forEach((indicator, index) => {
|
||
|
|
indicator.addEventListener('click', () => {
|
||
|
|
showSlide(index);
|
||
|
|
resetInterval();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 点击按钮切换轮播图
|
||
|
|
prevBtn.addEventListener('click', () => {
|
||
|
|
prevSlide();
|
||
|
|
resetInterval();
|
||
|
|
});
|
||
|
|
|
||
|
|
nextBtn.addEventListener('click', () => {
|
||
|
|
nextSlide();
|
||
|
|
resetInterval();
|
||
|
|
});
|
||
|
|
|
||
|
|
// 自动播放轮播图
|
||
|
|
function startInterval() {
|
||
|
|
carouselInterval = setInterval(nextSlide, 5000);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 重置自动播放计时器
|
||
|
|
function resetInterval() {
|
||
|
|
clearInterval(carouselInterval);
|
||
|
|
startInterval();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始化轮播图
|
||
|
|
showSlide(0);
|
||
|
|
startInterval();
|
||
|
|
|
||
|
|
// 鼠标悬停暂停轮播
|
||
|
|
carousel.addEventListener('mouseenter', () => {
|
||
|
|
clearInterval(carouselInterval);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 鼠标离开继续轮播
|
||
|
|
carousel.addEventListener('mouseleave', () => {
|
||
|
|
resetInterval();
|
||
|
|
});
|