93 lines
2.6 KiB
JavaScript
93 lines
2.6 KiB
JavaScript
window.onload = function () {
|
||
// 导航栏动效
|
||
$(window).scroll(function () {
|
||
var scroll = $(window).scrollTop();
|
||
var head_hight = $(".show").outerHeight();
|
||
if (scroll >= head_hight) {
|
||
$(".header").addClass("on");
|
||
} else {
|
||
$(".header").removeClass("on");
|
||
}
|
||
});
|
||
|
||
|
||
// 轮播图动效
|
||
slideW = 300;//一张图300px, 每面四张角度22.5（PI/8），中心角度PI/16
|
||
radius = slideW * 0.5 / Math.sin(Math.PI / 16);//半径。圆心并不是视点中心，视点在1200px
|
||
|
||
carouselSwiper = new Swiper('#carousel .swiper', {
|
||
watchSlidesProgress: true,
|
||
slidesPerView: 'auto',
|
||
centeredSlides: false,
|
||
speed: 200,
|
||
loop: true,
|
||
loopedSlides: 4,
|
||
grabCursor: true,
|
||
autoplay: {
|
||
delay: 800,
|
||
disableOnInteraction: false,
|
||
},
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev',
|
||
},
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
//clickable :true,
|
||
},
|
||
on: {
|
||
progress: function (swiper, progress) {
|
||
for (i = 0; i < this.slides.length; i++) {
|
||
let slide = this.slides.eq(i);
|
||
let slideProgress = this.slides[i].progress;
|
||
translateX = (slideProgress + 1.5) * (slideW / 3 - Math.cos((slideProgress + 1.5) * 0.125 * Math.PI) * slideW * 1.1 / 3) + 'px';//调整图片间距，根据图片宽度改变数值实现自适应
|
||
rotateY = (slideProgress + 1.5) * 22.5;//图片角度
|
||
translateZ = (radius - Math.cos((slideProgress + 1.5) * 0.125 * Math.PI) * radius - 150) + 'px';//调整图片远近，刚好4个在画框内
|
||
slide.transform('translateX(' + translateX + ') translateZ(' + translateZ + ') rotateY(' + rotateY + 'deg)');
|
||
|
||
}
|
||
},
|
||
setTransition: function (swiper, transition) {
|
||
for (let i = 0; i < this.slides.length; i++) {
|
||
let slide = this.slides.eq(i)
|
||
slide.transition(transition);
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
})
|
||
|
||
|
||
|
||
// 项目成果栏动画
|
||
$(window).on('scroll', function () {
|
||
let scrollTop = $(this).scrollTop();
|
||
let itemTop = $(".items").outerHeight();
|
||
|
||
if (scrollTop > itemTop / 2) {
|
||
$(".slideInUp").each(function (i) {
|
||
$(this)
|
||
.delay(i * 200)
|
||
.queue(function () {
|
||
$(this).addClass("animate__animated animate__fadeInUp");
|
||
});
|
||
});
|
||
}
|
||
});
|
||
|
||
(function () {
|
||
// 点击地区导航栏动态显示国家
|
||
var navs = document.querySelectorAll('.jump-list li a')
|
||
var banners = document.querySelectorAll('.pagechange .page')
|
||
for (let i = 0; i < navs.length; i++) {
|
||
navs[i].onclick = function () {
|
||
for (let j = 0; j < banners.length; j++) {
|
||
banners[j].style.display = 'none'
|
||
}
|
||
let navid = '#' + this.getAttribute('data-id')
|
||
document.querySelector(navid).style.display = 'block'
|
||
}
|
||
}
|
||
})();
|
||
} |