table自动滚动内容利用定时器

最新推荐文章于 2025-05-13 18:07:54 发布

IT_小草

最新推荐文章于 2025-05-13 18:07:54 发布

阅读量4.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/IT_xiaocao/article/details/79792065

本文介绍了如何在Vue项目中利用定时器实现Table组件的内容自动滚动效果，详细讲解了实现步骤和关键代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不出现滚动条，利用定时间自滚动。就想宣传网站中的新闻展示。

方法一：

<template>
	<div class="PMtable">
		<table class="tableTitle" cellpadding="2" width="600px">
		    <thead>
			    <!--<tr>
			      <td colspan="4" align="center">菜市场价格滚动条11</td>
			      <td colspan="7" align="center"></td>
			    </tr>-->
			    <tr bgcolor="#134458">
			      <td width="11%"   height="22">省份</td>
			      <td width="11%"   height="22">城市</td>
			      <td width="11%"   height="22">区县</td>
			      <td width="12%"   height="22">均值</td>
			      <td width="8%"   height="22">最小值</td>
			      
			      <td width="8%"   height="22">最大值</td>
			      <td width="8%"   height="22">25%</td>
			      <td width="8%"   height="22">50%</td>
			      <td width="8%"   height="22">75%</td>
			      <td width="10%"   height="22">样本量n(天)</td>
			      
			      <td width="8%"   height="22">缺失(天)</td>
			    </tr>
		    </thead>
		</table>
		<div id="demo" style="width:600px; height: 100px">
  			<div id="demo1">
  				<table class="tableCon" width="100%" v-on:mouseover="datashubiao" v-on:mouseout="mouseout1">
				    <tr>
				    	<td width="9%">北京市</td>
				    	<td width="9%">北京市</td>
				    	<td width="9%">东城区</td>
				    	<td width="9%">90</td>
				    	<td width="9%">30</td>
				    
				    	<td width="9%">120</td>
				    	<td width="9%">20</td>
				    	<td width="9%">50</td>
				    	<td width="9%">70</td>
				    	<td width="9%">30</td>
				    
				    	<td width="9%">0</td>
				  	</tr>
				 	<tr>
				    	<td width="9%">北京市</td>
				    	<td width="9%">北京市</td>
				    	<td width="9%">西城区</td>
				    	<td width="9%">90</td>
				    	<td width="9%">30</td>
				    
				    	<td width="9%">120</td>
				    	<