jQuery跑馬燈表格是一種非常實用的網頁展示效果,在網頁中往往會用到這種表格來展示一些重要信息或廣告。
下面是使用jquery實現跑馬燈表格的代碼:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <table cellspacing="0" cellpadding="0" id="marquee-table"> <tr> <td>第一條消息</td> <td>第二條消息</td> <td>第三條消息</td> <td>第四條消息</td> <td>第五條消息</td> <td>第六條消息</td> <td>第七條消息</td> <td>第八條消息</td> <td>第九條消息</td> </tr> </table> <script> $(function () { var marqueeTable = $('#marquee-table'); var tds = marqueeTable.find('td'); var cellCount = tds.size(); // 每個單元格的寬度 var cellWidth = tds.eq(0).width(); // 定義數據滾動的速度 var speed = 3000; // 重復循環加上表格中的內容 var repeating = setInterval(function () { // 從第二個單元格(序號1)開始,每個單元格向左移動一個寬度的距離 marqueeTable.animate({marginLeft: '-' + cellWidth + 'px'}, speed, 'linear', function () { // 把第一個單元格移到表格的最后,形成循環 $(this).css({marginLeft: 0}).find('tr:first').appendTo(this); }); }, cellCount * speed); }); </script>
代碼的實現思路非常簡單,首先獲取到表格元素和表格中的單元格,通過計算單元格寬度和滾動速度來實現單元格滾動。
代碼中使用了jQuery的animate函數來實現單元格的滾動,通過設置負左邊距來實現表格的滾動。
上一篇css怎么打開代碼提示
下一篇css怎么引入視頻鏈接