datalist动态滚动效果
在页面总会有进行动态滚动的,有时候我们会用HTML标签的Marquee来实现滚动,但我们都会看到滚动是间断的,这不是很扯淡,在对于动态的datalist来讲,做成不间断的连续流动增进了页面的效果,下面来讲讲各个方向的滚动吧
<div id="list5-content">
<div id="demo" style="overflow:hidden; height:160px">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td id="demo1">
<asp:DataList ID="dtZS" runat="server">
<ItemTemplate >
<table width="100%">
<tr>
<td>
<img src="../Image/img2.gif" />
</td>
<td width="300px">
<a href="www.baidu.com?id=<%#Eval("Id")%>" target="_blank" title="<%# Eval("Message_Title")%>"
style='<%# Eval("color")%>'>
<%# SemedWeb.Common.SplitString.SplitStrings(Eval("Message_Title").ToString(), 21,1)%>
<asp:Image ID="ImgZsNews" runat="server" /></a>
</td>
<td width="80px">
[<%#Eval("Message_time", "{0:yyyy-MM-dd}")%>]
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</td>
</tr>
<tr>
<td id="demo2"></td>
</tr>
</table>
<script>//向左滚动
var speed = 50
demo2.innerHTML = demo1.innerHTML
function Marquee() {
if (demo2.offsetWidth - demo.scrollLeft <= 0)
demo.scrollLeft -= demo1.offsetWidth
else {
demo.scrollLeft++
}
}
var MyMar = setInterval(Marquee, speed)
demo.onmouseover = function() { clearInterval(MyMar) }
demo.onmouseout = function() { MyMar = setInterval(Marquee, speed) }
</script>
<script>//向右滚动
var speed = 50
demo2.innerHTML = demo1.innerHTML
function Marquee() {
if ( demo.scrollLeft <= 0)
demo.scrollLeft += demo1.offsetWidth
else {
demo.scrollLeft--
}
}
var MyMar = setInterval(Marquee, speed)
demo.onmouseover = function() { clearInterval(MyMar) }
demo.onmouseout = function() { MyMar = setInterval(Marquee, speed) }
</script>
<script>//向上滚动
var speed = 50
demo2.innerHTML = demo1.innerHTML
function Marquee() {
if (demo2.offsetTop - demo.scrollTop <= 0)
demo.scrollTop -= demo1.offsetHeight
else {
demo.scrollTop++
}
}
var MyMar = setInterval(Marquee, speed)
demo.onmouseover = function() { clearInterval(MyMar) }
demo.onmouseout = function() { MyMar = setInterval(Marquee, speed) }
</script>
<script>//向下滚动
var speed = 50
demo2.innerHTML = demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee() {
if (demo2.offsetTop - demo.scrollTop >= 0)
demo.scrollTop += demo1.offsetHeight
else {
demo.scrollTop--
}
}
var MyMar = setInterval(Marquee, speed)
demo.onmouseover = function() { clearInterval(MyMar) }
demo.onmouseout = function() { MyMar = setInterval(Marquee, speed) }
</script>
</div>
</div>
上班偷偷写的,~~~