<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>螺纹旋转切换图片特效</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
background: #000;
}
.spiral-container {
position: relative;
width: 100vw;
height: 100vh;
perspective: 1000px;
}
.spiral-item {
position: absolute;
width: 200px;
height: 300px;
transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1);
transform-style: preserve-3d;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.spiral-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.controls {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
gap: 20px;
}
.control-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.5);
color: white;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.control-btn:hover {
background: rgba(255, 255, 255, 0.4);
}
</style>
</head>
<body>
<div class="spiral-container" id="spiralContainer"></div>
<div class="controls">
<button class="control-btn" id="prevBtn">←</button>
<button class="control-btn" id="nextBtn">→</button>
</div>
<script>
$(document).ready(function() {
// 图片数组
const images = [
'https://picsum.photos/800/600?random=1',
'https://picsum.photos/800/600?random=2',
'https://picsum.photos/800/600?random=3',
'https://picsum.photos/800/600?random=4',
'https://picsum.photos/800/600?random=5',
'https://picsum.photos/800/600?random=6',
'https://picsum.photos/800/600?random=7',
'https://picsum.photos/800/600?random=8'
];
const container = $('#spiralContainer');
const containerWidth = container.width();
const containerHeight = container.height();
let currentIndex = 0;
let items = [];
// 创建螺旋项目
function createSpiralItems() {
for (let i = 0; i < images.length; i++) {
const item = $('<div class="spiral-item"><img src="' + images[i] + '" alt=""></div>');
container.append(item);
items.push(item);
}
updateSpiral();
}
// 更新螺旋布局
function updateSpiral() {
const radius = Math.min(containerWidth, containerHeight) * 0.4;
const angleStep = (Math.PI * 2) / items.length;
const verticalStep = 50;
items.forEach((item, index) => {
const adjustedIndex = (index - currentIndex + items.length) % items.length;
const angle = adjustedIndex * angleStep;
const x = Math.cos(angle) * radius;
const z = Math.sin(angle) * radius * 2;
const y = adjustedIndex * verticalStep - (items.length / 2) * verticalStep;
const scale = 1 - adjustedIndex * 0.1;
const opacity = 1 - adjustedIndex * 0.2;
item.css({
'left': '50%',
'top': '50%',
'transform': `translate3d(-50%, -50%, 0) translate3d(${x}px, ${y}px, ${z}px) scale(${scale})`,
'opacity': opacity,
'z-index': items.length - adjustedIndex
});
// 为当前项目添加特殊样式
if (adjustedIndex === 0) {
item.css({
'box-shadow': '0 20px 50px rgba(255, 255, 255, 0.3)',
'border': '2px solid rgba(255, 255, 255, 0.8)'
});
} else {
item.css({
'box-shadow': '0 10px 30px rgba(0, 0, 0, 0.5)',
'border': 'none'
});
}
});
}
// 下一张
function next() {
currentIndex = (currentIndex + 1) % items.length;
updateSpiral();
}
// 上一张
function prev() {
currentIndex = (currentIndex - 1 + items.length) % items.length;
updateSpiral();
}
// 初始化
createSpiralItems();
// 绑定事件
$('#nextBtn').click(next);
$('#prevBtn').click(prev);
// 键盘控制
$(document).keydown(function(e) {
if (e.keyCode === 37) { // 左箭头
prev();
} else if (e.keyCode === 39) { // 右箭头
next();
}
});
// 自动旋转
let autoRotateInterval = setInterval(next, 3000);
// 鼠标悬停时暂停自动旋转
container.hover(
function() {
clearInterval(autoRotateInterval);
},
function() {
autoRotateInterval = setInterval(next, 3000);
}
);
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
