DEMO：osbbek
HTML:
<div class="industry py-5">
<div class="container-xxl">
$func_article(navi=nav,title=11,memo=1,more=11,para=industry,divi=none,rows=5,show=title|memo|more|content)$
</div>
</div>
CSS:
.industry {
border-bottom: 1px solid $gray-300;
.Margin {
overflow: hidden;
}
.More {
display: flex;
flex: 1;
justify-content: center;
margin-bottom: 2rem;
a {
border: 1px solid $fst;
color: $fst;
padding: 10px 20px;
border-radius: 20px;
&:hover {
background-color: $fst;
color: white;
}
}
}
.container-xxl {
.Content {
// 容器样式（完整参数）
position: relative;
height: 30vh;
min-height: 300px;
width: 100%;
// perspective: 1800px;
// overflow: visible;
// background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
// 内边距容器（完整保留原有class）
.Margin {
height: 100%;
width: 100%;
padding: 20px 0;
box-sizing: border-box;
// 文章视图容器（完整保留原有id）
#ArticleView {
height: calc(100% - 40px);
width: 100%;
position: relative;
overflow: visible;
// 列表样式（完整参数）
ul {
list-style: none;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
position: relative;
// 列表项完整样式
li {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
// height: 720px;
transform-style: preserve-3d;
transition: all 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
transform: translate(-50%, -50%);
will-change: transform;
backface-visibility: hidden;
// 图片容器完整样式
.gutters {
position: relative;
height: 100%;
width: 100%;
box-sizing: border-box;
// 图片完整样式
.thumbs {
height: 100%;
a {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
border-radius: 8px;
img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
transition: transform 0.3s ease;
}
}
}
// 标题完整样式
.title {
display: none;
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
font-weight: 500;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
white-space: nowrap;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
a {
color: white;
font-size: 16px;
}
}
}
}
}
}
}
}
}
}
JS:
document.addEventListener('DOMContentLoaded', () => {
// 获取所有轮播项
const items = document.querySelectorAll('.industry #ArticleView li');
// 三维位置参数配置（完整参数说明）
const positions = [{ // 左侧后方
// x: -320, // 水平偏移（像素）
x: -480, // 水平偏移（像素）
z: -600, // 景深位移（像素）
scale: 0.4, // 缩放比例
rotateY: 15, // Y轴旋转（度）
opacity: 0.8
},
{ // 左侧中层
// x: -160,
x: -240,
z: -300,
scale: 0.7,
rotateY: 8,
opacity: 0.9
},
{ // 中心前景
x: 0,
z: 0,
scale: 1,
rotateY: 0,
opacity: 1
},
{ // 右侧中层
x: 160,
x: 240,
z: -300,
scale: 0.7,
rotateY: -8,
opacity: 0.9
},
{ // 右侧后方
x: 320,
x: 480,
z: -600,
scale: 0.4,
rotateY: -15,
opacity: 0.8
}
];
// 动态布局函数（完整逻辑）
function updateLayout() {
const container = document.querySelector('.industry .Content');
container.style.height = container.offsetWidth * 3 / 5 + "px";
const containerWidth = container.offsetWidth;
const containerHeight = container.offsetHeight;
// console.log(containerWidth+"-"+containerHeight);
items.forEach((item, index) => {
const posIndex = (index + currentIndex) % 5;
const pos = positions[posIndex];
const imgContainer = item.querySelector('.gutters');
// 精确计算尺寸
// const baseSize = Math.min(containerWidth * 0.28, 480);
const baseSize = Math.min(containerWidth * 0.8, containerWidth);
item.style.width = `${baseSize}px`;
item.style.height = `${baseSize * 1.5}px`;
// 三维变换
item.style.transform = `
translate(
calc(-50% + ${(pos.x / 1280) * containerWidth}px),
-50%
)
translateZ(${pos.z}px)
scale(${pos.scale})
rotateY(${pos.rotateY}deg)
`;
// 视觉效果控制
item.style.zIndex = 5 - Math.abs(posIndex - 2);
item.style.opacity = pos.opacity;
imgContainer.style.transform = `scale(${1 + (1 - pos.scale)/2})`;
});
}
// 窗口自适应处理（完整事件监听）
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
updateLayout();
}, 250);
});
// 自动轮播控制（完整定时器逻辑）
let currentIndex = 0;
const animationInterval = setInterval(() => {
currentIndex = (currentIndex + 1) % 5;
updateLayout();
}, 4000);
// 初始化执行
updateLayout();
});
|
|Archiver|手机版|小黑屋|芜湖万网信息技术服务中心 弘帝企业智能建站系统
( 皖ICP备07503252号 )
发表于 2014-7-28 17:08:12
楼主
