js实现表格无缝滚动效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>table表格无缝向上滚动</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.tablebox {height: 500px;overflow: hidden;position: relative;width: 1000px;margin: 100px auto;background-color: rgba(6,26,103,1);
}.tbl-header {width: 100%;position: absolute;top: 0;left: 0;z-index: 999;
}.tbl-body {width: 100%;position: absolute;top: 0;left: 0;
}
.tablebox table {width: 100%;
}.tablebox table th,
.tablebox table td {font-size: 24px;color: #7ca6f4;line-height: 45px;text-align: center;
}.tablebox table tr th {background-color: #1f1f9c;cursor: pointer;
}.tablebox table tr td {background-color: transparent;
}.tbl-body tr:nth-child(even) td,.tbl-body1 tr:nth-child(even) td {background-color: rgba(31, 31, 156, .5);
}.tablebox table tr td span,
.tablebox table tr td span {font-size: 24px;
}</style>
</head>
<body><div class="tablebox"><div class="tbl-header"><table border="0" cellspacing="0" cellpadding="0"><thead><tr><th>排名</th><th>地市</th><th>销售收入(万元)</th><th>同比(%)</th><th>环比(%)</th><th>销售计划(万元)</th><th>计划完成率(%)</th></tr></thead><tbody style="opacity:0;"></tbody></table></div><div class="tbl-body"><table border="0" cellspacing="0" cellpadding="0"><thead><tr><th>排名</th><th>地市</th><th>销售收入(万元)</th><th>同比(%)</th><th>环比(%)</th><th>销售计划(万元)</th><th>计划完成率(%)</th></tr></thead><tbody></tbody></table></div></div><script>
var MyMarhq = '';
clearInterval(MyMarhq);
$('.tbl-body tbody').empty();
$('.tbl-header tbody').empty();
var str = '';
var Items = [{"Ranking":"1","City":"保定","SaleIncome":"2506734.43","SaleRough":"296071.96","SalePlan":"7200000","PlanFinish":"34.82","TonOilincome":"264.15","OilTransform":"29.62","An":"53.00","Mom":"-13.00"},{"Ranking":"2","City":"沧州","SaleIncome":"1425935.58","SaleRough":"93717.83","SalePlan":"3200000","PlanFinish":"44.56","TonOilincome":"366.59","OilTransform":"11.23","An":"65.00","Mom":"43.00"},{"Ranking":"3","City":"秦皇岛","SaleIncome":"1372207.38","SaleRough":"241071.82","SalePlan":"3000000","PlanFinish":"45.74","TonOilincome":"342.32","OilTransform":"6.61","An":"34.00","Mom":"7.00"},{"Ranking":"4","City":"衡水","SaleIncome":"972451.15","SaleRough":"87638.60","SalePlan":"2700000","PlanFinish":"36.02","TonOilincome":"246.03","OilTransform":"11.56","An":"15.00","Mom":"-18.00"},{"Ranking":"5","City":"石家庄","SaleIncome":"939010.52","SaleRough":"140217.37","SalePlan":"7200000","PlanFinish":"13.04","TonOilincome":"139.44","OilTransform":"19.23","An":"-57.00","Mom":"-48.00"},{"Ranking":"6","City":"邢台","SaleIncome":"774274.70","SaleRough":"124693.90","SalePlan":"3700000","PlanFinish":"20.93","TonOilincome":"138.87","OilTransform":"9.44","An":"-20.00","Mom":"-44.00"},{"Ranking":"7","City":"唐山","SaleIncome":"680456.79","SaleRough":"50542.14","SalePlan":"3600000","PlanFinish":"18.90","TonOilincome":"243.60","OilTransform":"16.95","An":"-29.00","Mom":"-49.00"},{"Ranking":"8","City":"张家口","SaleIncome":"613319.87","SaleRough":"176075.96","SalePlan":"3000000","PlanFinish":"20.44","TonOilincome":"87.09","OilTransform":"7.97","An":"2.00","Mom":"-24.00"},{"Ranking":"9","City":"中油华奥","SaleIncome":"596575.25","SaleRough":"387024.26","SalePlan":"11000000","PlanFinish":"5.42","TonOilincome":"93.58","OilTransform":"19.06","An":"35.00","Mom":"6.00"},{"Ranking":"10","City":"承德","SaleIncome":"589048.12","SaleRough":"68966.73","SalePlan":"2200000","PlanFinish":"26.77","TonOilincome":"193.24","OilTransform":"11.29","An":"30.00","Mom":"-28.00"},{"Ranking":"11","City":"廊坊","SaleIncome":"515448.14","SaleRough":"137934.72","SalePlan":"3500000","PlanFinish":"14.73","TonOilincome":"95.47","OilTransform":"8.80","An":"-48.00","Mom":"-3.00"},{"Ranking":"12","City":"瑞州","SaleIncome":"399875.26","SaleRough":"85371.46","SalePlan":"2000000","PlanFinish":"19.99","TonOilincome":"114.42","OilTransform":"11.42","An":"128.00","Mom":"-30.00"},{"Ranking":"13","City":"石家庄中油","SaleIncome":"90543.62","SaleRough":"20065.14","SalePlan":"430000","PlanFinish":"21.06","TonOilincome":"213.44","OilTransform":"20.45","An":"-24.00","Mom":"-17.00"},{"Ranking":"14","City":"辛集中油","SaleIncome":"49255.52","SaleRough":"8743.12","SalePlan":"250000","PlanFinish":"19.70","TonOilincome":"202.67","OilTransform":"29.95","An":"19.00","Mom":"-6.00"},{"Ranking":"15","City":"井陉中油","SaleIncome":"29682.60","SaleRough":"2175.66","SalePlan":"140000","PlanFinish":"21.20","TonOilincome":"730.20","OilTransform":"25.55","An":"-74.00","Mom":"-52.00"},{"Ranking":"16","City":"保定中油","SaleIncome":"11887.73","SaleRough":"2944.97","SalePlan":"100000","PlanFinish":"11.89","TonOilincome":"118.12","OilTransform":"34.16","An":"-64.00","Mom":"-72.00"}]
$.each(Items,function (i, item) {str = '<tr>'+'<td>'+item.Ranking+'</td>'+'<td>'+item.City+'</td>'+'<td>'+(+item.SaleIncome/10000).toFixed(2)+'</td>'+'<td>'+(+item.An).toFixed(2)+'</td>'+'<td>'+(+item.Mom).toFixed(2)+'</td>'+'<td>'+(item.SalePlan/10000).toFixed(2)+'</td>'+'<td>'+(+item.PlanFinish).toFixed(2)+'</td>'+'</tr>'$('.tbl-body tbody').append(str);$('.tbl-header tbody').append(str);
});if(Items.length > 10){$('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html());$('.tbl-body').css('top', '0');var tblTop = 0;var speedhq = 50; // 数值越大越慢var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();function Marqueehq(){if(tblTop <= -outerHeight*Items.length){tblTop = 0;} else {tblTop -= 1;}$('.tbl-body').css('top', tblTop+'px');}MyMarhq = setInterval(Marqueehq,speedhq);// 鼠标移上去取消事件$(".tbl-header tbody").hover(function (){clearInterval(MyMarhq);},function (){clearInterval(MyMarhq);MyMarhq = setInterval(Marqueehq,speedhq);})}
</script></body>
</html>

js实现表格无缝滚动效果相关推荐

html table表格无缝向上滚动效果,js实现表格无缝滚动效果
table表格无缝向上滚动 height: 500px; overflow: hidden; position: relative; width: 1000px; margin: 100px auto ...
react表格无缝滚动_js实现表格无缝滚动效果
table表格无缝向上滚动 height: 500px; overflow: hidden; position: relative; width: 1000px; margin: 100px auto ...
JS实现图片无缝滚动效果
首先,借助一张草图来简单说明一下往左移动的做法(往右相同). 如上图所示,图片的无缝滚动原理其实是把滚动的图片复制成两份并联排列,当滚动完一次后就把图片扯回到起点,重新滚动.这里的往左运动把图片扯回起 ...
html多张图片无缝滚动播放,jQuery实现的多张图无缝滚动效果【测试可用】
本文实例讲述了jQuery实现的多张图无缝滚动效果.分享给大家供大家参考,具体如下: slider *{ padding: 0; margin: 0; } li{ list-style-type: n ...
php无缝滚动文字,JQuery文字无缝滚动效果实现方法
本文主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 推荐一个JQuery的无缝文字滚动效果,同时也可以滚 ...
文字无限无缝滚动效果——和派孔明
文字无限无缝滚动效果--和派孔明 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
html加js实现滚动图片,js实现图片无缝滚动
js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2 ...
html5实现无缝滚动的效果,基于JavaScript实现无缝滚动效果
本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码,供大家参考,具体内容如下首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝 ...
分别用marquee和div+js实现首尾相连循环滚动效果
分别用marquee和div+js实现首尾相连循环滚动效果,特效代码非常精简,仅3行实现! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

js实现表格无缝滚动效果

js实现表格无缝滚动效果相关推荐

最新文章

热门文章