70 lines
2.7 KiB
JavaScript
70 lines
2.7 KiB
JavaScript
// let businessContent = null;
|
||
// 内容部分
|
||
const businessContent = document.querySelector('.business-content');
|
||
console.log(businessContent);
|
||
const businessBgImg = document.querySelector('#businessBgImg');
|
||
const business_card = document.querySelectorAll('.business-card');
|
||
const business_card_group = document.querySelector('.business-card-group');
|
||
console.log("我是"+business_card_group.children);
|
||
|
||
const businessList = [
|
||
{
|
||
img:"images/IMUT_day.jpg",
|
||
name:"蓝牙手环",
|
||
desc:"专注力提升设备是坤班核心业务之一，涵盖智能硬件研发、定制化生产、调试维护等全流程服务，聚焦提升学习/工作专注力，适配校园与企业多场景。"
|
||
},
|
||
|
||
{
|
||
img:"images/IMUT_night.jpg",
|
||
name:"UE5",
|
||
desc:"基于UE5引擎的三维场景搭建与渲染服务，提供高精度模型制作、虚拟场景定制、可视化效果呈现，服务于影视、教育、工业等多个领域。",
|
||
},
|
||
|
||
{
|
||
img:"images/IMUT_day.jpg",
|
||
name:"AI影视人才",
|
||
desc:"AI影视人才平台是坤班重点布局方向，整合人工智能技术与影视行业需求，提供人才匹配、AI工具开发、场景落地等一站式解决方案。",
|
||
},
|
||
|
||
{
|
||
img:"images/IMUT_night.jpg",
|
||
name:"中国通",
|
||
desc:"海外通业务聚焦跨境技术合作与对接，整合海内外优质资源，搭建国际技术交流桥梁，助力项目出海与海外资源引进。",
|
||
},
|
||
];
|
||
|
||
business_card.forEach(card=>{
|
||
console.log("card"+card);
|
||
|
||
// console.log("businessList:"+businessList);
|
||
|
||
card.addEventListener('mouseover',function(){
|
||
// console.log(Array.from(business_card_group.querySelectorAll('.business-card')));
|
||
// const a = businessList.indexOf(card);
|
||
// console.log(a);
|
||
|
||
const arrayindex = Array.from(business_card);
|
||
const index = arrayindex.indexOf(card);
|
||
console.log(businessList[index].name);
|
||
businessContent.innerHTML =
|
||
`
|
||
<div class="business-content-title" style="color:black;">${businessList[index].name}</div>
|
||
<div class="business-content-desc" style="color:black;">${businessList[index].desc}</div>
|
||
`;
|
||
|
||
businessBgImg.style.opacity = 0;
|
||
setTimeout(() => {
|
||
businessBgImg.src = businessList[index].img;
|
||
businessBgImg.onload = function() {
|
||
businessBgImg.style.opacity = 1;
|
||
};
|
||
}, 300);
|
||
// businessBgImg.style.transition = 'opacity 1s ease-in-out';
|
||
// console.log(businessBgImg.style.transition);
|
||
|
||
|
||
// console.log(businessBgImg.src);
|
||
|
||
})
|
||
});
|