vue 实现无缝向左滚动鼠标悬停、离开时停止、开始滚动

最新推荐文章于 2025-08-19 14:53:51 发布

原创

最新推荐文章于 2025-08-19 14:53:51 发布 · 3.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue #无缝滚动 #跑马灯

本文介绍了如何使用Vue实现无缝向左滚动的效果，鼠标悬停时停止，离开时自动开始滚动。通过HTML、JS和CSS代码展示实现过程，适合Vue初学者。作者计划后续将扩展到上下滚动和幻灯片等功能。

用的引用vue文件方式写的，可以改成组件代码

html代码：

<div class="cont">
	<div class="contlist" ref='contlist' @mouseover="stopScroll" @mouseout="startScroll">
		<ul>
			<li v-for="(item, index) in list" :key="index">
				{
  
  { index + 1 }} 、<em>{
  
  { item.name }}</em> {
  
  { item.time }}
			</li>
		</ul>
		<ul>
			<li v-for="(item, index) in list" :key="index">
				{
  
  { index + 1 }} 、<em>{
  
  { item.name }}</em> {
  
  { item.time }}
			</li>
		</ul>
	</div>
</div>

js 代码：

<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			list: [
				{name: '负限位报警', time: '2019-12-18 16:20:34'},
				{name: '水位报警', time: '2019-12-18 16:20:34'},
				{name: '正限位报警', time: '2019-12-18 16:20:34'},
				{name: '温度报警', time: '2019-12-18 16:20:34'},
				{name: