数据少于等于两条会不滚动，大于两条就会实现滚动效果///
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
.blk_02 .table_data
{
height: 54px;
overflow: auto;
}
table
{
margin: 0px;
padding: 0px;
border-color: Blue;
border-width: 1px;
border-style: inset;
border-collapse: collapse;
}
td
{
overflow-y: hidden;
text-align: center;
margin: 0px;
padding: 0px;
border-color: Blue;
border-width: 1px;
border-style: ridge;
font-size: 20px;
font-family: @楷体;
}
label
{
text-align:center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="border-style: solid; border-width: 2px; border-color: Blue; width: 100%">
<tr>
<td style="width: 50px; font-size: 20px;">
字段
<br />
字段
</td>
<td>
<table style="width: 100%">
<tr style="width: 100%">
<td style="width: 10%; font-size: 18px;">
字段
</td>
<td style="width: 30%; font-size: 18px;">
字段
</td>
<td style="width: 20%; font-size: 18px;">
字段
</td>
<td style="width: 30%; font-size: 18px;">
字段
</td>
<td style="font-size: 18px;">
字段
</td>
</tr>
<tr>
<td colspan="5" width="100%">
<div class="blk_02" id="chg">
<div class="table_data" id="demo" style="overflow-y: hidden">
<div id="demo1" style="overflow-y: hidden" width="100%">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="100%"
PageSize="2" ShowHeader="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%#bind("数据") %>' Height="29px" Font-Size="15px" ForeColor="Red" BorderColor="Blue"></asp:Label>
</ItemTemplate>
<ItemStyle Width="10%" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%#bind("数据") %>' Font-Size="15px" ForeColor="Red" BorderColor="Blue"></asp:Label>
</ItemTemplate>
<ItemStyle Width="30%" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%#bind("数据") %>' Font-Size="15px" ForeColor="Red" BorderColor="Blue"></asp:Label>
</ItemTemplate>
<ItemStyle Width="20%" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label4" runat="server" Text='<%#bind("数据") %>' Font-Size="15px" ForeColor="Red" BorderColor="Blue"></asp:Label>
</ItemTemplate>
<ItemStyle Width="30%" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label5" runat="server" Text='<%#bind("数据") %>' Font-Size="15px" ForeColor="Red" BorderColor="Blue"></asp:Label>
</ItemTemplate>
<ItemStyle Width="10%" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
<td style="width: 50px; border-top-width: 2px; border-top-style: solid">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="图片路径（大小自己设置好）" OnClientClick="return up()" />
<br />
------
<br />
<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="图片路径（大小自己设置好）" OnClientClick="return down()"/>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<script type="text/javascript">
//滚动速度
var speed = 40;
//滚动方法及判断
function Marquee() {
if (document.getElementById("demo").scrollTop >= document.getElementById("demo1").offsetHeight - document.getElementById("demo").offsetHeight) {
document.getElementById("demo").scrollTop = 0;
} else {
document.getElementById("demo").scrollTop++
}
}
var MyMar = setInterval(Marquee, speed)
document.getElementById("demo").onmouseover = function () { clearInterval(MyMar) }
document.getElementById("demo").onmouseout = function () { MyMar = setInterval(Marquee, speed) }
//向上滚动方法
function up() {
// alert( document.getElementById("demo").offsetHeight);
document.getElementById("demo").scrollTop =
document.getElementById("demo").scrollTop - 30;
return false;
}
//向下滚动方法
function down() {
//alert(document.getElementById("demo").scrollTop);
document.getElementById("demo").scrollTop =
document.getElementById("demo").scrollTop + 30;
return false;
}
</script>
扫一扫
2715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
