前段代码:
<div id="out" style=" 400px;overflow:hidden;"> <div id="int" style="white-space:nowrap;800px;"> <asp:Label ID="lblTable" runat="server" Text="Label"></asp:Label> </div> </div> <label onmousedown="marqueeById('l'),ShowLbl('lblRight')" id="lblLeft" onmouseup="marqueeStop()" style="visibility: hidden"><<<<</label>
<label onmousedown="marqueeById('r'),ShowLbl('lblLeft')" id="lblRight" onmouseup="marqueeStop()" style="visibility: hidden">>>>></label>
注意:内层div宽度大于外层div,宽度的设定不仅局限于实际像素,也可使用百分比;js指向的的是外层div。外层div内部元素超出部分隐藏overflow:hidden,内层div的text不允许换行white-space:nowrap
后台:
protected void Page_Load(object sender, EventArgs e) { ShowMenu(20); } private void ShowMenu(int m) { string strTable = ""; for (int i = 0; i <= m; i++) { strTable += "<a href="# " class="nav" ><span>" + i + "</span></a>"; } lblTable.Text = strTable; }
注意:自动生成的菜单栏;
JavaScript:
var speed = 10; //数字越大速度越慢 var getMoveId = document.getElementById("out"); //需要移动的控件ID var getIntId = document.getElementById("int"); var getLeftId = document.getElementById("lblLeft"); var getRightId = document.getElementById("lblRight"); var myMark; //开关标记 function marqueeById(direction) { direction == "r" ? moveRight() : moveLeft(); } function marqueeStop() { clearInterval(myMark); if (getMoveId.scrollLeft == 0) { getLeftId.style.visibility = "hidden"; } if (getMoveId.scrollLeft == (getIntId.offsetWidth - getMoveId.offsetWidth)) { getRightId.style.visibility = "hidden"; } } function moveRight() { myMark = setInterval(function () { getMoveId.scrollLeft++ }, speed); } function moveLeft() { myMark = setInterval(function () { getMoveId.scrollLeft-- }, speed); } function ShowLbl(id) { var imgid = document.getElementById(id); if (imgid.style.visibility == "hidden") { imgid.style.visibility = "visible"; } } function load() { if (getIntId.offsetWidth > getMoveId.offsetWidth) { getRightId.style.visibility = "visible"; } }
效果展示:
点击右侧箭头:
点击左侧: