htlygw/js/javascript.js

475 lines
15 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

jQuery(function($){
// banner轮播
var number = $('.banner-swiper .swiper-slide').length;
if(number>1){
var bannerSwiper = new Swiper('.banner-swiper',{
loop:true,//开启循环播放
autoplay: {//开启自动播放
delay:3000,
disableOnInteraction: false,//触摸后不会停止自动滚动
pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换鼠标离开时恢复自动切换。
},
pagination: {
el: '.banner-swiper .swiper-pagination',
clickable :true,
renderBullet: function (index, className) {
return '<span class="' + className + '">'+'<em>'+'0' + (index + 1) +'</em>'+'<ins></ins>'+ '</span>';
},
},
effect : 'fade',//轮播的动效 默认为"slide"(普通位移切换),还可设置为"fade"(淡入)、"cube"(方块)、"coverflow"3d流、"flip"3d翻转、"cards"(卡片式)、"creative"(创意性)。
fadeEffect: {
crossFade: true,
},
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
// this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次去除ani类名
}
}
});
}
// 加载动画
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: -50,
mobile: true,
live: true
});
wow.init();
};
// 二级栏目切换
if(screen.width <= 780){
$(".sub-left>span").eq(0).addClass("cur");
$(".sub-right>span").eq(0).show();
$('.sub-left>span').click(function(){
$(".sub-left>span").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
$(".sub-right>span").hide().eq($(this).index()).show();
});
$(".sub-left-01>span").eq(0).addClass("cur");
$(".sub-right-01>span").eq(0).show();
$('.sub-left-01>span').click(function(){
$(".sub-left-01>span").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
$(".sub-right-01>span").hide().eq($(this).index()).show();
});
}else{
$(".sub-left>span").eq(0).addClass("cur");
$(".sub-right>span").eq(0).show();
$('.sub-left>span').hover(function(){
$(".sub-left>span").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
$(".sub-right>span").hide().eq($(this).index()).show();
});
$(".sub-left-01>span").eq(0).addClass("cur");
$(".sub-right-01>span").eq(0).show();
$('.sub-left-01>span').hover(function(){
$(".sub-left-01>span").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
$(".sub-right-01>span").hide().eq($(this).index()).show();
});
}
// 首页视屏轮播
var number = $('.about-video-swiper .swiper-slide').length;
if(number>1){
var bannerSwiper = new Swiper('.about-video-swiper',{
loop:true,//开启循环播放
autoplay: {//开启自动播放
delay:3000,
disableOnInteraction: false,//触摸后不会停止自动滚动
pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换鼠标离开时恢复自动切换。
},
pagination: {
el: '.about-video-swiper .swiper-pagination',
clickable :true,
renderBullet: function (index, className) {
return '<span class="' + className + '">'+'<em></em>'+'</span>';
},
},
effect : 'fade',//轮播的动效 默认为"slide"(普通位移切换),还可设置为"fade"(淡入)、"cube"(方块)、"coverflow"3d流、"flip"3d翻转、"cards"(卡片式)、"creative"(创意性)。
fadeEffect: {
crossFade: true,
},
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
// this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次去除ani类名
}
}
});
}
// 解决方案滚动
if(screen.width <= 768){
var solutionNavSwiper = new Swiper('.solution-nav-swiper',{
slidesPerView: 3,
slidesPerGroup: 1,
slidesPerGroupAuto: true,
autoplay:false,
})
}else{
var solutionNavSwiper = new Swiper('.solution-nav-swiper',{
slidesPerView: 6,
spaceBetween: 5,
slidesPerGroup: 1,
slidesPerGroupAuto: true,
autoplay:false,
})
}
// 案例详情页滚动
var caseThumbnailSwiper = new Swiper('.case-thumbnail-swiper',{
direction: 'vertical',
slidesPerView: 4,
watchSlidesVisibility: true,//防止不可点击
})
var caseSwiper = new Swiper('.case-swiper',{
autoplay: true,
effect : 'fade',
fadeEffect: {
crossFade: true,
},
navigation: {
nextEl: '.case-thumbnail-bg .swiper-button-next',
prevEl: '.case-thumbnail-bg .swiper-button-prev',
},
thumbs: {
swiper: caseThumbnailSwiper,
},
})
// 产品详情页滚动
var productThumbnailSwiper = new Swiper('.product-thumbnail-swiper',{
slidesPerView: 5,
spaceBetween: 4,
watchSlidesVisibility: true,//防止不可点击
})
var productSwiper = new Swiper('.product-swiper',{
autoplay: true,
effect : 'fade',
fadeEffect: {
crossFade: true,
},
navigation: {
nextEl: '.product-thumbnail-bg .swiper-button-next',
prevEl: '.product-thumbnail-bg .swiper-button-prev',
},
thumbs: {
swiper: productThumbnailSwiper,
},
})
// 产品详情页切换
$(".product-btns>span").eq(0).addClass("active");
$(".body-txt>.txt-item").eq(0).show();
$('.product-btns>span').click(function(){
$(".product-btns>span").eq($(this).index()).addClass("active").siblings().removeClass('active');
$(".body-txt>.txt-item").hide().eq($(this).index()).show();
});
// 解决方案选项卡
$('.index-solution-nav .swiper-wrapper>.swiper-slide').eq(0).addClass('cur');
$('.index-solution-list>li').eq(0).show();
$('.solution-more-list>li').eq(0).addClass('show');
$('.index-solution-more').addClass('active');
$('.index-solution-nav .swiper-wrapper>.swiper-slide').click(function(){
$('.index-solution-nav .swiper-wrapper>.swiper-slide').eq($(this).index()).addClass("cur").siblings().removeClass('cur');
$('.index-solution-list>li').eq($(this).index()).show().siblings().hide();
$('.solution-more-list>li').eq($(this).index()).addClass("show").siblings().removeClass('show');
$('.index-solution-more').addClass('active');
});
$('.solution-txt>.more').click(function(){
$('.index-solution-more').addClass('active');
});
$('.solution-more-btn').click(function(){
$('.index-solution-more').removeClass('active');
});
// 历程滚动
if(screen.width <= 768){
var memorabiliSwiper = new Swiper('.memorabili-swiper',{
loop:false,//开启循环播放
autoplay : {
delay:3000,
disableOnInteraction: false,
},
effect : 'fade',
fadeEffect: {
crossFade: true,
},
navigation: {
prevEl: '.memorabili-swiper .swiper-button-prev',
nextEl: '.memorabili-swiper .swiper-button-next',
},
})
}else{
var memorabiliSwiper = new Swiper('.memorabili-swiper',{
loop:false,//开启循环播放
autoplay: true,
slidesPerView : '6',
centeredSlides : false,
navigation: {
prevEl: '.memorabili-swiper .swiper-button-prev',
nextEl: '.memorabili-swiper .swiper-button-next',
},
on:{
slideChange: function(){
var a = this.activeIndex;
var b = a + 6;
var c = a - 1;
$(".memorabili-swiper").find(".swiper-slide").css("opacity",1);
$(".memorabili-swiper").find(".swiper-slide").eq(c).css("opacity",0);
$(".memorabili-swiper").find(".swiper-slide").eq(b).css("opacity",0);
},
},
})
}
// 视频播放
$('.video-swiper-wrapper>.swiper-slide').click(function(){
$('.video-list-bg').show();
$(".video-list>li").eq($(this).index()-1).addClass("show").siblings().removeClass('show');
$(".video-list>li").eq($(this).index()-1).find('video').trigger('play').siblings().find('video').trigger('pause');
});
$('.close-video').click(function(){
$('.video-list-bg').hide();
$(".video-list>li").removeClass('show');
$(".video-list>li").find('video').trigger('pause');
});
// 关于我们视频播放
$('.strength-img').click(function(){
$('.video-list-bg').show();
$(".video-list>li").addClass('show');
});
$('.close-video').click(function(){
$('.video-list-bg').hide();
$(".video-list>li").removeClass('show');
});
// 荣誉资质滚动
if(screen.width <= 768){
var honorSwiper = new Swiper('.honor-swiper',{
loop:false,//开启循环播放
autoplay : {
delay:3000,
disableOnInteraction: false,
},
effect : 'fade',
fadeEffect: {
crossFade: true,
},
navigation: {
prevEl: '.honor-swiper .swiper-button-prev',
nextEl: '.honor-swiper .swiper-button-next',
},
})
}else{
var honorSwiper = new Swiper('.honor-swiper',{
loop:false,//开启循环播放
autoplay: false,
navigation: {
prevEl: '.honor-list>.swiper-button-prev',
nextEl: '.honor-list>.swiper-button-next',
},
})
}
// 弹出荣誉资质
$('.honor-list .swiper-slide').click(function(){
$('.honor-list-other').removeClass("hide");
$('.all-bg').show();
});
$('.close-swiper').click(function(){
$('.honor-list-other').addClass("hide");
$('.all-bg').hide();
});
// 荣誉资质弹出滚动
var honorOtherSwiper = new Swiper('.honor-other-swiper',{
loop:false,//开启循环播放
autoplay: true,
navigation: {
prevEl: '.honor-list-other>.swiper-button-prev',
nextEl: '.honor-list-other>.swiper-button-next',
},
})
// 列表页二级导航切换
var pullNavSwiper = new Swiper('.pull-nav-swiper',{
slidesPerView: 'auto',
slidesPerGroup: 1,
slidesPerGroupAuto: true,
autoplay:false,
navigation: {
nextEl: '.pull-nav .swiper-button-next',
prevEl: '.pull-nav .swiper-button-prev',
},
})
// 列表页三级导航切换
var navThreeSwiper = new Swiper('.nav-three-swiper',{
slidesPerView: 'auto',
slidesPerGroup: 1,
slidesPerGroupAuto: true,
autoplay:false,
})
// 招聘信息展开
$('.item-btns').click(function() {
if($(this).parent().attr('class') == 'wow fadeInUp animated active'){
$('.recruit-list>li').removeClass('active');
$(this).parent().find('.txt').removeClass('cur')
$('.recruit-list>li').find("em").html("+")
}else{
$('.recruit-list>li').removeClass('active')
$('.recruit-list>li').find('.txt').removeClass('cur')
$(this).parent().addClass('active')
$(this).parent().find('.txt').addClass('cur')
$('.recruit-list>li').find("em").html("+")
$('.recruit-list>li.active').find("em").html("-")
}
});
// 返回顶部
$('.back-top').click(function(){
$('html,body').animate({scrollTop:$('#top').offset().top}, 1000);
});
// 关于我们锚点
if(screen.width <= 780){
$('.survey-btn').click(function(){
$('html,body').animate({scrollTop:$('.about-survey-bg').offset().top - 50}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
$('.course-btn').click(function(){
$('html,body').animate({scrollTop:$('.about-course-bg').offset().top - 50}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
$('.strength-btn').click(function(){
$('html,body').animate({scrollTop:$('.strength-bg').offset().top - 50}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
$('.vision-btn').click(function(){
$('html,body').animate({scrollTop:$('.vision-bg').offset().top - 50}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
$('.honor-btn').click(function(){
$('html,body').animate({scrollTop:$('.honor-bg').offset().top - 50}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
$('.social-btn').click(function(){
$('html,body').animate({scrollTop:$('.social-bg').offset().top - 50}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
}else{
$('.survey-btn').click(function(){
$('html,body').animate({scrollTop:$('.about-survey-bg').offset().top - 80}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
$('.course-btn').click(function(){
$('html,body').animate({scrollTop:$('.about-course-bg').offset().top - 80}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
$('.strength-btn').click(function(){
$('html,body').animate({scrollTop:$('.strength-bg').offset().top - 80}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
$('.vision-btn').click(function(){
$('html,body').animate({scrollTop:$('.vision-bg').offset().top - 80}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
$('.honor-btn').click(function(){
$('html,body').animate({scrollTop:$('.honor-bg').offset().top - 80}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
$('.social-btn').click(function(){
$('html,body').animate({scrollTop:$('.social-bg').offset().top - 80}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
}
//职业发展锚点
if(screen.width <= 780){
$('.idea-btn').click(function(){
$('html,body').animate({scrollTop:$('.idea-bg').offset().top - 50}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
$('.culture-btn').click(function(){
$('html,body').animate({scrollTop:$('.culture-bg').offset().top - 50}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
$('.recruit-btn').click(function(){
$('html,body').animate({scrollTop:$('.recruit-bg').offset().top - 50}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
}else{
$('.idea-btn').click(function(){
$('html,body').animate({scrollTop:$('.idea-bg').offset().top - 80}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
$('.culture-btn').click(function(){
$('html,body').animate({scrollTop:$('.culture-bg').offset().top - 80}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
$('.recruit-btn').click(function(){
$('html,body').animate({scrollTop:$('.recruit-bg').offset().top - 80}, 1000);
$('.pull-nav .swiper-slide>a').removeClass("active");
$(this).addClass("active");
});
}
// 手机导航按钮
$('.head .head-btn').click(function() {
if ($('.head .head-btn').attr('class') == 'head-btn cur') {
$('.head .head-btn').removeClass('cur');
$('.head .nav').removeClass('active');
$('.head .nav-bg').removeClass('active');
} else {
$('.head .head-btn').addClass('cur');
$('.head .nav').addClass('active');
$('.head .nav-bg').addClass('active');
$('.head .logo').addClass('active');
}
});
$('.head .nav-bg').click(function() {
$(this).removeClass('active');
$('.head .head-btn').removeClass('cur');
$('.head .nav').removeClass('active');
});
})