按钮控制DIV中内容左右移动

本帖最后由 a1438827123 于 2010-03-13 11:44:21 编辑

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

你可以这样<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server">  protected void Page_Load(object sender, EventArgs e)
  {
    Button1.OnClientClick = "return leftMove();";
    Button2.OnClientClick = "return rightMove();";
  }
</script><html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>无标题页</title>
<script type="text/javascript">
  function leftMove() {    d = document.getElementById("div1")
    d.scrollLeft -= 30
    return false;
  }  function rightMove() {
    d = document.getElementById("div1")
    d.scrollLeft += 30
    return false;
  }
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
 
<br />
<table style="height: 10px; width: 307px;">
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="<<" /></td>
<td>
<div style="width: 260px; height: 40px; background-color: #ccccff;overflow:hidden" id="div1">
<nobr>
<asp:Label ID="Label1" runat="server" Text="11111"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="22222"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="33333"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="44444"></asp:Label>
<asp:Label ID="Label5" runat="server" Text="55555"></asp:Label>
<asp:Label ID="Label6" runat="server" Text="66666"></asp:Label>
<asp:Label ID="Label7" runat="server" Text="77777"></asp:Label>
<asp:Label ID="Label8" runat="server" Text="88888"></asp:Label>
<asp:Label ID="Label9" runat="server" Text="99999"></asp:Label>
</nobr>
</div>
</td>
<td >
<asp:Button ID="Button2" runat="server" Text=">>" /></td>
</tr>
</table></div>
</form>
</body>
</html>
但具体的大小要根据你的时间内容调整
主要思路就是点击的时候让div的位置改变，点击一下移动一个div的宽度，asp的宽度也行
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server">  protected void Page_Load(object sender, EventArgs e)
  {
    Button1.OnClientClick = "return leftMove();";
    Button2.OnClientClick = "return rightMove();";
  }
</script><html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>无标题页</title>
<script type="text/javascript">
  function leftMove() {    d = document.getElementById("div1")
    d.scrollLeft -= 30
    return false;
  }  function rightMove() {
    d = document.getElementById("div1")
    d.scrollLeft += 30
    return false;
  }
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
 
<br />
<table style="height: 10px; width: 307px;">
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="<<" /></td>
<td>
<div style="width: 260px; height: 40px; background-color: #ccccff;overflow:hidden" id="div1">
<nobr>
<asp:Label ID="Label1" runat="server" Text="11111"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="22222"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="33333"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="44444"></asp:Label>
<asp:Label ID="Label5" runat="server" Text="55555"></asp:Label>
<asp:Label ID="Label6" runat="server" Text="66666"></asp:Label>
<asp:Label ID="Label7" runat="server" Text="77777"></asp:Label>
<asp:Label ID="Label8" runat="server" Text="88888"></asp:Label>
<asp:Label ID="Label9" runat="server" Text="99999"></asp:Label>
</nobr>
</div>
</td>
<td >
<asp:Button ID="Button2" runat="server" Text=">>" /></td>
</tr>
</table></div>
</form>
</body>
</html>不错......可以实现你说的功能.
我是用d.scrollTop属性的。哈哈