mirror of
https://gitcode.com/leisileken/cloud-smart.git
synced 2026-09-11 10:27:20 +08:00
feat: 成功案例滑动效果优化 - 鼠标悬停暂停,移开继续滚动
This commit is contained in:
@@ -132,16 +132,21 @@ const scrollCases = computed(() => {
|
||||
// 滚动位置状态
|
||||
const scrollPosition = ref(0)
|
||||
|
||||
// 暂停状态
|
||||
const isPaused = ref(false)
|
||||
|
||||
// 自动滚动逻辑
|
||||
let scrollInterval: number | null = null
|
||||
|
||||
onMounted(() => {
|
||||
const scrollSpeed = 0.3 // 滚动速度
|
||||
const scrollSpeed = 0.3
|
||||
scrollInterval = window.setInterval(() => {
|
||||
const totalCases = successCases.length
|
||||
const itemWidth = 100 / 3 // 每次显示3个,每个占33.33%
|
||||
const maxScroll = (totalCases / 3) * 100 // 滚动到所有案例都展示完
|
||||
scrollPosition.value = (scrollPosition.value + scrollSpeed) % maxScroll
|
||||
if (!isPaused.value) {
|
||||
const totalCases = successCases.length
|
||||
const itemWidth = 100 / 3
|
||||
const maxScroll = (totalCases / 3) * 100
|
||||
scrollPosition.value = (scrollPosition.value + scrollSpeed) % maxScroll
|
||||
}
|
||||
}, 50)
|
||||
})
|
||||
|
||||
@@ -286,7 +291,7 @@ const closeCaseDetail = () => {
|
||||
<h2 class="text-3xl font-bold text-white mb-4">成功案例</h2>
|
||||
<p class="text-white/70">我们在各行业的成功实践</p>
|
||||
</div>
|
||||
<div class="relative h-32 overflow-hidden">
|
||||
<div class="relative h-32 overflow-hidden" @mouseenter="isPaused = true" @mouseleave="isPaused = false">
|
||||
<div
|
||||
class="absolute inset-0 flex transition-transform duration-500 ease-in-out"
|
||||
:style="{ transform: `translateX(-${scrollPosition}%)` }"
|
||||
|
||||
Reference in New Issue
Block a user