css3实现动态滚动播放列表功能
<p>需要自动滚动循环播放的列表，使用纯CSS实现基础循环功能</p><p style="text-align:center"><img alt="" height="217" src="https://img.jbzj.com/file_images/article/202409/2024091116584639.gif" width="552" /></p>
<div class="jb51code"><pre class="brush:css;"> .messages
animation-name carousel
animation-timing-function linear
animation-iteration-count infinite
.message-item
cursor pointer
margin-top 10px
&.stopPlay
animation-play-state paused
/**
CSS3 animation-play-state 属性 值为paused时暂停动画，为running时继续动画
*/
@keyframes carousel {
0% {
transform: translateY(0%)
}
100% {
transform: translateY(-50%)
}
}</pre></div>
<p>完整代码</p>
<div class="jb51code"><pre class="brush:css;"><template>
<div>
<div class="top-line">
<div class="box-title">
<span class="title">XXXX专题图</span>
</div>
</div>
<div class="scroll-box">
<ul class="messages" @mouseover="stopAnim" @mouseout="runAnim" v-if="list.length"
:style="{ animationDuration: animationDuration }" :class="{ stopPlay: animationPlayState }">
<li class="message-item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
<div class="message-top">
<span class="message-title">{{ item.name }}</span>
<span class="message-time">{{ item.startDate }}</span>
</div>
<p class="message-content">{{ item.content }}</p>
</li>
</ul>
<div class="none" v-else>
暂无内容
</div>
</div>
</div>
</template></pre></div>
<div class="jb51code"><pre class="brush:css;"><script>
import test11List from '@/assets/test11List'
export default {
data() {
return {
animationDuration: '',
animationPlayState: false,
list: test11List.list,
category: ''
};
},
mounted() {
this.getData()
},
methods: {
getData() {
let data = this.list
if (data.length <= 2) {
this.animationPlayState = true
this.animationDuration = 2 + 's'//动画持续时间
} else {
// 跑马灯动画
this.animationDuration = data.length * 2 + 's'
this.list = this.list.concat(this.list)
}
},
stopAnim() {//鼠标移入暂停动画
this.animationPlayState = true
},
runAnim() {//鼠标移除继续动画
if (this.list.length > 2) {
this.animationPlayState = false
}
}
},
};
</script></pre></div>
<div class="jb51code"><pre class="brush:css;"><style lang="stylus" scoped>
*{
margin: 0
padding: 0
}
ul{
list-style: none
}
.scroll-box{
width 100%
height 800px
overflow hidden
border 2px solid red
}
.box-title
line-height 34px
font-size 16px
background: blue
color: #fff
opacity 1
.messages
animation-name carousel
animation-timing-function linear
animation-iteration-count infinite
.message-item
cursor pointer
margin-top 10px
&.stopPlay
animation-play-state paused
/**
CSS3 animation-play-state 属性 值为paused时暂停动画，为running时继续动画
*/
.none
text-align center
line-height 537px
color #fff
@keyframes carousel {
0% {
transform: translateY(0%)
}
100% {
transform: translateY(-50%)
}
}
</style></pre></div>
頁:
[1]