初始提交
This commit is contained in:
424
rg-09112127/js/indexHome.js
Normal file
424
rg-09112127/js/indexHome.js
Normal file
@@ -0,0 +1,424 @@
|
||||
$(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();
|
||||
});
|
||||
Reference in New Issue
Block a user