Javascript+Div实现Marquee效果（一）【element.AppendChild()】

以前实现文字滚动效果时，都是用Marquee来做，具体代码如下：

<MARQUEE direction="up" height="70" scrollAmount="1" scrollDelay="1" vspace="2" onmouseover='this.stop()' onmouseout='this.start()'>
2

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

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

<ItemTemplate>
5

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

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

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

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

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

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

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

</a>
13

</td>
14

</tr>
15

</table>
16

</ItemTemplate>
17

</asp:DataList>
18

</Marquee>

效果还可以，但Marquee有个缺点，就是每轮结束后都有一个空白。下面介绍的方法将避免这个缺点，
它是利用Div＋element.AppendChild()来实现的，还是看代码吧：

<html xmlns="http://www.w3.org/1999/xhtml">
2

<head>
3

*{border:1px sold green}
5

a{display:block;font-size:15px;}
6

</style>
7

<title></title>
8

</head>
9

<body style="background-color: Black;">
10

<div id="d" style="width: 300px; height: 96px; background-color: White; overflow: hidden;">
11

<div style="height: 96px; line-height: 200%;">
12

<table border="0" cellpadding="1" cellspacing="0">
13

<tr>
14

<td valign="middle" style="height: 23px;">
15

 1323    青岛如家快捷酒店
16

</td>
17

</tr>
18

<tr>
19

<td valign="middle" style="height: 23px;">
20

 1324    奥帆旅行网
21

</td>
22

</tr>
23

<tr>
24

<td valign="middle" style="height: 23px;">
25

 1325    携程旅行网
26

</td>
27

</tr>
28

<tr>
29

<td valign="middle" style="height: 23px;">
30

 1329    青岛远洋国际旅行社
31

</td>
32

</tr>
33

</table>
34

</div>
35

<div style="height: 96px; line-height: 200%;">
36

<table border="0" cellpadding="1" cellspacing="0">
37

<tr>
38

<td valign="middle" style="height: 23px;">
39

 1610    青岛万达影城
40

</td>
41

</tr>
42

<tr>
43

<td valign="middle" style="height: 23px;">
44

 1520    北京香格里拉大饭店
45

</td>
46

</tr>
47

<tr>
48

<td valign="middle" style="height: 23px;">
49

 1621    黄山风景区
50

</td>
51

</tr>
52

<tr>
53

<td valign="middle" style="height: 23px;">
54

 1915    青岛鲜花网
55

</td>
56

</tr>
57

</table>
58

</div>
59

<div style="height: 96px; line-height: 200%;">
60

<table border="0" cellpadding="1" cellspacing="0">
61

<tr>
62

<td valign="middle" style="height: 23px;">
63

 1512    青岛爱尊客商务酒店
64

</td>
65

</tr>
66

<tr>
67

<td valign="middle" style="height: 23px;">
68

 1713    青岛玩家餐饮娱乐
69

</td>
70

</tr>
71

<tr>
72

<td valign="middle" style="height: 23px;">
73

 1723    泰山风景区
74

</td>
75

</tr>
76

<tr>
77

<td valign="middle" style="height: 23px;">
78

 1327    中国民航网
79

</td>
80

</tr>
81

</table>
82

</div>
83

</div>
84

var t=setInterval(myfunc,3000)
87

function myfunc()
88

{
89

d.appendChild(d.firstChild)
90

}
91

d.onmouseover=function(){clearInterval(t)}
92

d.onmouseout=function(){t=setInterval(myfunc,3000)}
93

</script>
94

</body>
96

</html>
97

注意：如果不加overflow:hidden元素将全部显示，效果不明显。

posted on 2007-01-12 11:15 xpengfee 阅读(1214) 评论(0) 收藏举报