实现类似表格内容动态滚动效果
生活随笔
收集整理的這篇文章主要介紹了
实现类似表格内容动态滚动效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 需求背景
- 效果圖
- 實現思路
- 示例代碼
需求背景
在一些大屏首頁展示上，通常會有一些表格展示，由于大屏的特殊性，不會有人專門去操作這個頁面查看相應數據，一般都會采用動態滾動的效果。下面是具體的實現。
效果圖
實現思路
示例代碼
index.html
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>表格動態滾動效果</title><link rel="stylesheet" type="text/css" href="css/style.css" /><script type="text/javascript" src="js/jquery-2.1.1.min.js"></script><script type="text/javascript" src="js/index.js"></script> </head><body><div class="scroll-table"><ul class="scroll-table-head"><li>學號</li><li>姓名</li><li>成績</li></ul><div class="scroll-table-body"><div class="scroll-table-body-inner"><ul class="scroll-table-body-row-1"><li><div>1</div></li><li>大牛</li><li><span>50</span></li></ul><ul class="scroll-table-body-row-2"><li><div>2</div></li><li>二狗</li><li><span>90</span></li></ul><ul class="scroll-table-body-row-3"><li><div>3</div></li><li>三毛</li><li><span>78</span></li></ul><ul><li><div>4</div></li><li>四角</li><li><span>89</span></li></ul><ul><li><div>5</div></li><li>五娃</li><li><span>76</span></li></ul><ul><li><div>6</div></li><li>六孩</li><li><span>100</span></li></ul></div></div></div> </body></html>index.js
/*列表滾動*/ $(function(){var scrollIndex = 0;var scrollIndex1 = 1;var scrollIndex2 = 2;var scrollIndex3 = 3;var scrolltimer = null;var scrollimgs = $(".scroll-table-body-inner>ul");var scrolltime = 1500;var scrollplayNum = scrollimgs.length - 1;function moveTop() {scrollimgs.eq(scrollIndex).stop(true).animate({top: '-33%'},function(){$(this).css({top:"100%"});});scrollimgs.eq(scrollIndex1).stop(true).animate({top: 0});scrollimgs.eq(scrollIndex2).stop(true).animate({top: '33%'});scrollimgs.eq(scrollIndex3).stop(true).animate({top: '66%'});scrollimgs.removeClass();}function autoPlay() {if(scrollIndex > scrollplayNum) {scrollIndex = 0;}if(scrollIndex1 > scrollplayNum) {scrollIndex1 = 0;}if(scrollIndex2 > scrollplayNum) {scrollIndex2 = 0;}if(scrollIndex3 > scrollplayNum) {scrollIndex3 = 0;}moveTop();scrollIndex++;scrollIndex1++;scrollIndex2++;scrollIndex3++;}scrolltimer = setInterval(autoPlay,scrolltime);$(".scroll-table-body").mouseenter(function () {clearInterval(scrolltimer);}).mouseleave(function () {scrolltimer = setInterval(autoPlay,scrolltime);}); });style.css
body,ol,ul{margin:0;padding:0;font-weight: normal;} *{box-sizing: border-box;} html,body{height: 100%;width: 100%;position: relative;overflow: auto;background: #0C192C; } ul>li{list-style: none; } .scroll-table{width: 382px;margin: 17px auto 25px auto;height: 216px; } .scroll-table-head{height: 44px;border: 1px solid rgba(74,137,219,0.36);width: 100%;font-size: 16px;color: #D1E7FF;font-weight: bold; } .scroll-table-head>li{float: left;border-right: 1px solid rgba(74,137,219,0.36);text-align: center;height: 100%;line-height: 42px; } .scroll-table-head>li:first-child{width: 104px; } .scroll-table-head>li:nth-child(2){width: 165px; } .scroll-table-head>li:last-child{width: calc(100% - 269px);border: 0; } .scroll-table-body{height: calc(100% - 44px);width: 100%;border: 1px solid rgba(74,137,219,0.36);border-top: 0;overflow: hidden; } .scroll-table-body-inner{position: relative;height: 100%;width: 100%; } .scroll-table-body-inner>ul:nth-child(odd){background: rgba(255,255,255,0.08); } .scroll-table-body-inner>ul{height: 33%;line-height: 48px;border-bottom: 1px solid rgba(74,137,219,0.36);overflow: hidden;position: absolute;left: 0;width: 100%;top: 100%; } .scroll-table-body-inner>ul>li{font-size: 16px;color: #FFFFFF;height: 100%;float: left;text-align: center; } .scroll-table-body-inner>ul>li:first-child{width: 103px; } .scroll-table-body-inner>ul>li:nth-child(2){width: 166px; } .scroll-table-body-inner>ul>li:last-child{width: calc(100% - 269px); } .scroll-table-body-inner>ul.scroll-table-body-row-1{top: 0; } .scroll-table-body-inner>ul.scroll-table-body-row-2{top: 33%; } .scroll-table-body-inner>ul.scroll-table-body-row-3{top: 66%; }源碼地址：https://download.csdn.net/download/wml00000/11158979
總結
以上是生活随笔為你收集整理的实现类似表格内容动态滚动效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： margin-top的百分比是相对父元素
- 下一篇： 隐藏滚动条，保留鼠标滚动效果