Javascript+Div实现Marquee效果(二)[无空白轮显]

接上篇.
上次介绍了用Div的AppendChild方法实现的Marquee效果.用这种方法,如果轮显内容是静态的,那效果还是不错的;但如果是动态读去内容,特别是用DataList控件(大部分动态轮显列表内容读取都是用DataList),我试过几次都不成功.虽然转个弯,更改输出内容(不用DataList)也能实现,但总觉得不适合.
今天浏览网页(锐搜http://www.ruisou.com.cn/trade/)时,发现其用了Marquee效果,而且无空白.好奇之下,便想一窥究竟,终于让我发现了一个解决上述问题的好方法.呵呵,不多说了,看代码吧:

<div id="demo" style="overflow: hidden; height: 70px" onmouseover="clearInterval(s);"
2

onmouseout="s = setInterval(qswhMarquee,100)">
3

<div id="demo1">
4

<asp:DataList ID="dlGuanZhu" runat="server" BorderStyle="None" BorderWidth="0px"
5

CellPadding="0" ShowFooter="False" ShowHeader="False" Width="100%" Height="100%">
6

<ItemTemplate>
7

<table border="0" cellpadding="5" cellspacing="0" style="width: 100%; height: 100%;">
8

<tr style="background-color: White;">
9

<td style="width: 100%; white-space: nowrap;">
10

 <img src="/App_Themes/1001/Images/ar.gif" alt="" /> <a class="CommonLink"
11

href='/News/Read.aspx?id=<%# DataBinder.Eval(Container.DataItem, "cGuid")%>'
12

target="_blank" title='<%# DataBinder.Eval(Container.DataItem, "cTitle")%>'>
13

<%# DataBinder.Eval(Container.DataItem, "cSubTitle")%>
14

</a>
15

</td>
16

</tr>
17

</table>
18

</ItemTemplate>
19

</asp:DataList>
20

</div>
21

<div id="demo2">
22

</div>
23

var t=demo.scrollTop
26

demo2.innerHTML=demo1.innerHTML
27

function qswhMarquee()
28

{
29

if(demo2.offsetTop-demo.scrollTop<=0)
30

demo.scrollTop-=demo1.offsetHeight
31

else
32

demo.scrollTop++
33

}
34

s = setInterval(qswhMarquee,100)
35

</script>
36

</div>

posted on 2007-01-26 15:20 xpengfee 阅读(1083) 评论(0) 收藏举报