$(function () {
clickBlowUp() //鐐瑰嚮鍥剧墖鏀惧ぇ
createBackground($('.circle-animated'))
scrollNumber()
cardFadeIn()
$(document).scroll(function () {
cardFadeIn()
animeBackground()
backGroundScroll()
scrollNumber()
})
initTabs();
if($('.hd_fixed').offset()){
var t = $('.hd_fixed').offset().top;
$(window).scroll(function (e) {
s = $(document).scrollTop();
if (s > t - 153) {
$('.hd_fixed').css('top', s - t + 200+'px');
} else {
$('.hd_fixed').css('top', '53px');
}
})
}
})
//card缁勪欢涓婄Щ鏁堟灉
function cardFadeIn() {
var winHeight = $(window).height() + $(document).scrollTop();
$('.card-content:not(.card-content-show)').each(function () {
if ($(this).offset().top - winHeight < -100) {
$(this).addClass('card-content-show')
}
})
}
function scrollNumber() {
var winHeight = $(window).height() + $(document).scrollTop();
$('.number-contain:not(.no-scroll)').each(function () {
if ($(this).offset().top - winHeight < -100) {
$('.scrolling_numbers').each(function(){
numberScroll(this, [0, Number($(this).text())])
})
$(this).addClass('no-scroll')
}
})
}
//鍒涘缓鏋舵瀯鑳屾櫙鍥剧墖锛?涓柟鍧?涓や釜鍦嗭級
function createBackground(className) {
const imgUrl = '/uploads/p_hzero/'
const imgList = [
{name: 'infrastructure-bg1.svg', className: 'square-item1'},
{name: 'infrastructure-bg2.svg', className: 'square-item2'},
{name: 'infrastructure-bg3.svg', className: 'square-item3'},
]
imgList.forEach(item => {
let imgDom = ``
$(className).append(imgDom)
})
$('
').appendTo(className)
$('').appendTo(className)
}
//鏋舵瀯閮ㄥ垎鑳屾櫙鍥剧墖婊氬姩鐗规晥()(涓や釜鍦?
function animeBackground() {
if ($('.circle-animated').length == 0) {
return
}
var scrollValue = ($(window).height() + $(document).scrollTop() - $('.circle-animated').offset().top) / 2
if (scrollValue > 0 && scrollValue < 700) {
anime({
targets: '.item-bg1',
translateY: scrollValue,
translateX: scrollValue,
loop: false,
duration: 300,
easing: 'linear'
});
anime({
targets: '.item-bg2',
translateY: -scrollValue,
translateX: scrollValue,
loop: false,
duration: 300,
easing: 'linear'
})
}
}
//鏋舵瀯鍥剧墖鏀惧ぇ
//骞冲彴鏋舵瀯鍥剧墖鐐瑰嚮鏀惧ぇ
function clickBlowUp() {
let isBig = false
$('.blowUp-img').click(function () {
isBig = !isBig;
isBig ? $(this).addClass('blowUp-style') : $(this).removeClass('blowUp-style')
})
}
//浜у搧浼樺娍icon娓叉煋
function renderIcon(list, boxDom, boxType) {
if (boxType === 'vertical') {
list.forEach(item => {
$(`
${item.title}
${item.description}
`).appendTo(boxDom)
})
$('.vertical-icon-box:gt(3)').css('margin-top', '40px')
} else if (boxType === 'cross') {
list.forEach(item => {
$(`
${item.title}
${item.description}
`).appendTo(boxDom)
})
$('.cross-icon-box:gt(0)').css('margin-top', '16px')
} else if (boxType === 'link') {
list.forEach((item, index) => {
$(``).appendTo(boxDom)
})
list.forEach((item, index) => {
item.descriptionList.forEach(liValue => {
$(`${liValue}銆?/span>`).appendTo($(`.icon-content > #link-${index}`))
})
})
$('.cross-icon-box:gt(0)').css('margin-top', '16px')
} else if (boxType === 'honour') {
list.forEach(item => {
let iconDom = $(`
${item.number}
${item.number}
${item.title}
${item.description}
`)
iconDom.appendTo(boxDom)
})
}else if(boxType === 'develop'){
list.forEach((item,index)=> {
let iconDom = $(`
${item.number}
${item.number}
${item.title}
${item.description}
`)
iconDom.appendTo(boxDom)
item.explain.forEach(i=> {
console.log(i)
let pDom=$(`
${i}
`)
pDom.appendTo(`.const${index}`)
})
})
}else if(boxType === 'advantage'){
list.forEach(item => {
$(``).appendTo(boxDom)
})
$('.vertical-icon-box:gt(3)').css('margin-top', '40px')
}
}
//浜у搧娓呭崟娓叉煋circle
function renderCircle() {
var circleList = [
{itemWidth: '104', topValue: '136', leftValue: '3', h2Content: 'HDGP', pContent: '鏁版嵁娌荤悊骞冲彴'},
{itemWidth: '98', topValue: '262', leftValue: '0', h2Content: 'HSSP', pContent: '璐㈠姟鍏变韩骞冲彴'},
{itemWidth: '134', topValue: '46', leftValue: '111', h2Content: 'HLS', pContent: '铻嶈祫绉熻祦绠$悊'},
{itemWidth: '110', topValue: '193', leftValue: '132', h2Content: 'HALM', pContent: '璧勪骇绠$悊绯荤粺'},
{itemWidth: '194', topValue: '325', leftValue: '76', h2Content: 'ZenWay', pContent: '闂绠$悊/鎸佺画鏀瑰杽绠$悊骞冲彴'},
{itemWidth: '96', topValue: '116', leftValue: '258', h2Content: 'HTMS', pContent: '杩愯緭绠$悊绯荤粺'},
{itemWidth: '124', topValue: '244', leftValue: '252', h2Content: 'O2', pContent: '鍏ㄦ笭閬撶數鍟嗙郴缁?},
{itemWidth: '110', topValue: '382', leftValue: '307', h2Content: 'HEC', pContent: '璐规帶绠$悊绯荤粺'},
{itemWidth: '80', topValue: '40', leftValue: '361', h2Content: 'HDSP', pContent: '鏁版嵁涓彴'},
{itemWidth: '188', topValue: '123', leftValue: '364', h2Content: 'OneContract', pContent: '鍚堝悓绠$悊绯荤粺'},
{itemWidth: '142', topValue: '318', leftValue: '440', h2Content: 'HSRM', pContent: '渚涘簲鍏崇郴绠$悊绯荤粺'},
{itemWidth: '126', topValue: '71', leftValue: '547', h2Content: 'HMDM', pContent: '涓绘暟鎹鐞嗙郴缁?},
{itemWidth: '106', topValue: '223', leftValue: '563', h2Content: 'HPMS', pContent: '椤圭洰绠$悊绯荤粺'},
{itemWidth: '110', topValue: '365', leftValue: '601', h2Content: 'Tarzan', pContent: '鐮斿彂绠$悊骞冲彴'},
{itemWidth: '110', topValue: '118', leftValue: '690', h2Content: 'HATC', pContent: '鑷姩鍖栨祴璇曞钩鍙?},
{itemWidth: '142', topValue: '242', leftValue: '695', h2Content: 'Hi-loT', pContent: '鏅鸿兘鐗╄仈缃戝钩鍙?},
{itemWidth: '110', topValue: '398', leftValue: '749', h2Content: 'HWMS', pContent: '浠撳偍绠$悊绯荤粺'},
{itemWidth: '78', topValue: '65', leftValue: '801', h2Content: 'HNLP', pContent: 'NLP骞冲彴'},
{itemWidth: '98', topValue: '164', leftValue: '817', h2Content: 'HSCS', pContent: '缁撶畻绠$悊绯荤粺'},
{itemWidth: '98', topValue: '312', leftValue: '852', h2Content: 'SPC', pContent: '杩滅▼鎺у埗宸ュ叿'},
]
var circleNodes = [];
var renderNodes = function renderNodes(index) {
var _nodes = JSON.parse(JSON.stringify(circleList));
if (index > -1) {
_nodes[index].bgColor = ['#4DB7DD', '#3BD5B3', '#4A8BFE', '#FFDB72', '#FF808A'][Math.floor(Math.random() * 5)];
var list = _nodes.map(function (v) {
v.xd = _nodes[index].leftValue - v.leftValue;
v.yd = _nodes[index].topValue - v.topValue;
v.distance = Math.floor(Math.sqrt(v.xd * v.xd + v.yd * v.yd));
if (v.distance > 0) {
v.leftValue = parseInt(v.leftValue) - v.xd * v.itemWidth * 0.1 / v.distance * _nodes[index].itemWidth * 0.01;
v.topValue = parseInt(v.topValue) - v.yd * v.itemWidth * 0.1 / v.distance * _nodes[index].itemWidth * 0.01;
} else {
v.leftValue = v.leftValue - v.itemWidth * 0.1;
v.topValue = v.topValue - v.itemWidth * 0.1;
v.itemWidth = v.itemWidth * 1.2;
}
return v;
});
}
circleNodes.forEach(function (node, i) {
node.css({
'background': _nodes[i].bgColor || '#FFFFFF',
'width': _nodes[i].itemWidth + 'px',
'left': _nodes[i].leftValue + 'px',
'height': _nodes[i].itemWidth + 'px',
'top': _nodes[i].topValue + 'px',
'z-index': _nodes[i].zIndex || 98
});
});
};
circleList.forEach(function (item, index) {
var itemCircle = $("" + item.h2Content + "
" + item.pContent + "
");
itemCircle.mouseenter(function () {
renderNodes(index);
});
itemCircle.mouseleave(function () {
renderNodes(-1);
});
circleNodes.push(itemCircle);
itemCircle.appendTo($('.product-content'));
});
renderNodes(-1);
}
//鍒濆鍖朣wiper
function reSwiper() {
var mySwiper = new Swiper('.function-swiper > .swiper-container', {
autoplay: true,//鍙€夐€夐」锛岃嚜鍔ㄦ粦鍔
effect: 'coverflow',
coverflowEffect: {
rotate: 0,
stretch: 745,
depth: 300,
slideShadows: false
},
centeredSlides: true,
slidesPerView: 'auto',
loop: true,
navigation: {
disabledClass: 'my-button-disabled',
hideOnClick: true,
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true
}
})
$('.swiper-slide').mouseenter(function () {
mySwiper.autoplay.stop();
})
$('.swiper-slide').mouseleave(function () {
mySwiper.autoplay.start();
})
$('.swiper-button').mouseenter(function () {
$(this).addClass('swiper-button-white')
}).mouseleave(function () {
$(this).removeClass('swiper-button-white')
})
}
//闄勫甫杩涘害鏉$殑杞挱
function renderScheduleSwiper(dom) {
var newSwiper = new Swiper(dom, {
direction: 'horizontal',
loop: true, // 寰幆妯″紡閫夐」
autoplay: {
disableOnInteraction: false,
delay: 5000,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
bulletElement: 'li',
}
});
}
//闄勫甫杩涘害鏉$殑杞挱锛堝彲榧犳爣瑕嗙洊鍒囨崲锛
function renderScheduleSwipermouse(dom) {
var mouseSwiper = new Swiper(dom, {
direction: 'horizontal',
loop: true, // 寰幆妯″紡閫夐」
autoplay: {
disableOnInteraction: false,
delay: 5000,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
bulletElement: 'li',
}
});
for(i=0;i -1) {
$(this).closest('.hand_tabs').children('.hand_tabs_content').addClass('selected').children('.tabpanel').eq(index).fadeIn();
}
})
$('.hand_tabs_header .tab').click(function () {
var self = $(this)
var index = self.index()
var isGroup = self.closest('.hand_tabs_group').length > 0
var isShowContent = self.parent().siblings('.hand_tabs_content').hasClass('selected');
var panrentNode = isGroup ? self.closest('.hand_tabs_group') : self.closest('.hand_tabs')
var isSelf = self.hasClass('clicked')
var isCanHiddenSelf = 'canHidden' in panrentNode.data()
if (isGroup && !isShowContent) {
self.closest('.hand_tabs_group').find('.hand_tabs_content').removeClass('selected');
self.parent().siblings('.hand_tabs_content').addClass('selected');
}
panrentNode.find('.tab').removeClass('clicked')
panrentNode.find('.tabpanel').hide();
if(!isCanHiddenSelf || !isSelf){
self.addClass('clicked')
self.closest('.hand_tabs').find('.tabpanel').eq(index).fadeIn();
}
})
}
/* 浜у搧鐗规€?&骞冲彴鎶€鏈爤 Tabs*/
function ProductTab(tab, list) {
tab.forEach((item, index) => {
const lis = $(`${tab[index]}
`)
$('.technology-type').append(lis)
})
list.forEach((item, index) => {
const dom = $(`
`)
$('.technology-s').append(dom)
$(`.hzero_control:eq(0)`).css('display', 'flex')
$(`.hzero_control:eq(1)`).css('display', 'none')
$(`.hzero_control:eq(2)`).css('display', 'none')
$(`.hzero_control:eq(3)`).css('display', 'none')
$(`.hzero_control:eq(4)`).css('display', 'none')
$('.technology-type li:eq(0)').addClass('type-light')
$('.technology-type li').mouseenter(function () {
let index = $(this).index();
$(this).siblings().removeClass('type-light');
$(this).addClass('type-light');
$(`.hzero_control:eq(${index})`).css('display', 'flex');
$(`.hzero_control:gt(${index})`).css('display', 'none');
$(`.hzero_control:lt(${index})`).css('display', 'none')
});
})
}
//鑳屾櫙鍥剧墖婊氬姩鐩稿叧
function backGroundScroll() {
var winHeight = $(window).height() + $(document).scrollTop();
$('.scroll-background').each(function () {
var scrollHeight = $(this).offset().top - $(document).scrollTop();
if ($(this).offset().top - winHeight < -100 && scrollHeight > 0) {
anime({
targets: '.scroll-background .bg-img1,.scroll-background .bg-img3',
translateY: scrollHeight / 6,
loop: false,
duration: 300,
easing: 'linear'
});
anime({
targets: '.scroll-background .bg-img4',
translateY: scrollHeight / 6,
loop: false,
duration: 300,
easing: 'linear'
});
}
})
}
//鏁板瓧婊氬姩鐗规晥
function numberScroll(dom, range) {
anime({
targets: dom,
innerHTML: range,
easing: 'linear',
duration: 1000,
round: 1
});
}