87,993
社区成员
发帖
与我相关
我的任务
分享如何将Gridview的数据按时间段显示？
学习中碰到一个问题，自己没想出解决方法，特来请教大神们。
有如图所示的一个表，要求客户端全屏显示三行，分别为上一时段、当前时段、下一时段的内容，按时段滚动显示。当前时段要突出显示（设定指定背景或边框等）。
有如图所示的一个表，要求客户端全屏显示三行，分别为上一时段、当前时段、下一时段的内容，按时段滚动显示。当前时段要突出显示（设定指定背景或边框等）。
...全文
请发表友善的回复…
发表回复
Hello World, 2017-07-28
- 打赏
- 举报
取数据就取三段的，每行占33%的高度，定时刷新数据。
也可以用DIV布局
小飞飞007 2017-07-28
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding:0px;margin:0px;list-style-type: none;}
#content{width:1200px;background:#ccc;margin:0px auto;padding:20px 0px;}
#content ul li{width:100%;border:1px solid black;background:#f80;margin:3px 0px;text-align: center;font-size: 40px;color:white;}
</style>
</head>
<body>
<div id="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.js"></script> <!-- 引入jquery -->
<script type="text/javascript">
$(function(){
var num=$("#content ul li").size() //li的个数
var li_height=$(window).height()/3 //让li的高度为页面的1/3
$("#content ul li").height(li_height) //设置li高度为
$(window).scroll(function(){ //滚动条监听
for(var a=0;a<num;a++){ //每滚动一次监听所有的li距离窗口最顶端的距离
var o_top=$("#content ul li").eq(a).offset().top-$(window).scrollTop()//計算每个li距离窗口最顶端的距离
if(o_top>=(li_height/2)&&o_top<=(li_height+(li_height/3))){ //判断当前li否在页面中央并改变其样式
$("#content ul li").eq(a).css("background","#000")
$("#content ul li").eq(a).siblings("li").css("background","#f80")
}
}
})
})
</script>
</body>
</html>
