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

最新推荐文章于 2022-08-08 17:17:37 发布

IT_小草

最新推荐文章于 2022-08-08 17:17:37 发布

阅读量4.5k

点赞数 1

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

本文链接：https://blog.csdn.net/IT_xiaocao/article/details/79792065

版权

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

摘要由CSDN通过智能技术生成

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

方法一：

<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>
				    	<