Javascript+Div实现Marquee效果(三)[无空白,暂停效果]

           最近适应公司业务发展需要,对网站首页进行改版.按美工的要求,列表轮显那块要实现那种停一阵在动的效果.唉,真是难为我啊.好不容易上网淘了一个,改吧改吧.嗯,效果还不错.有针对需求,写了个方法动态输出轮显的内容.下面分两部分(静态内容;动态内容)贴出代码,大家可以研究一下,不错的!
           一 静态轮显内容:

  1<div id="icefable2" style="width: 200px;">
  2                                                                                                    <div style="height: 96px; line-height: 200%;">
  3                                                                                                        <table border="0" cellpadding="1" cellspacing="0">
  4                                                                                                            <tr>
  5                                                                                                                <td valign="middle" style="height: 23px;">
  6                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-6666
  7                                                                                                                    &nbsp;&nbsp;<img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
  8                                                                                                                        alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img
  9                                                                                                                            src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 10                                                                                                                                alt="" border="0" />
 11                                                                                                                </td>
 12                                                                                                            </tr>
 13                                                                                                            <tr>
 14                                                                                                                <td valign="middle" style="height: 23px;">
 15                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-8888
 16                                                                                                                    &nbsp;&nbsp;<img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 17                                                                                                                        alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img
 18                                                                                                                            src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 19                                                                                                                                alt="" border="0" />
 20                                                                                                                </td>
 21                                                                                                            </tr>
 22                                                                                                            <tr>
 23                                                                                                                <td valign="middle" style="height: 23px;">
 24                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-9999
 25                                                                                                                    &nbsp;&nbsp;<img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 26                                                                                                                        alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img
 27                                                                                                                            src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 28                                                                                                                                alt="" border="0" />
 29                                                                                                                </td>
 30                                                                                                            </tr>
 31                                                                                                            <tr>
 32                                                                                                                <td valign="middle" style="height: 23px;">
 33                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-2008
 34                                                                                                                    &nbsp;&nbsp;<img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 35                                                                                                                        alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img
 36                                                                                                                            src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 37                                                                                                                                alt="" border="0" />
 38                                                                                                                </td>
 39                                                                                                            </tr>
 40                                                                                                        </table>
 41                                                                                                    </div>
 42                                                                                                    <div style="height: 96px; line-height: 200%;">
 43                                                                                                        <table border="0" cellpadding="1" cellspacing="0">
 44                                                                                                            <tr>
 45                                                                                                                <td valign="middle" style="height: 23px;">
 46                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-1949
 47                                                                                                                    &nbsp;&nbsp;<img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 48                                                                                                                        alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img
 49                                                                                                                            src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 50                                                                                                                                alt="" border="0" />
 51                                                                                                                </td>
 52                                                                                                            </tr>
 53                                                                                                            <tr>
 54                                                                                                                <td valign="middle" style="height: 23px;">
 55                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-1000
 56                                                                                                                    &nbsp;&nbsp;<img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 57                                                                                                                        alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img
 58                                                                                                                            src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 59                                                                                                                                alt="" border="0" />
 60                                                                                                                </td>
 61                                                                                                            </tr>
 62                                                                                                            <tr>
 63                                                                                                                <td valign="middle" style="height: 23px;">
 64                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-2000
 65                                                                                                                    &nbsp;&nbsp;<img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 66                                                                                                                        alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img
 67                                                                                                                            src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 68                                                                                                                                alt="" border="0" />
 69                                                                                                                </td>
 70                                                                                                            </tr>
 71                                                                                                            <tr>
 72                                                                                                                <td valign="middle" style="height: 23px;">
 73                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-1118
 74                                                                                                                    &nbsp;&nbsp;<img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 75                                                                                                                        alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img
 76                                                                                                                            src="App_Themes/1001/Images/rank.gif" alt="" border="0" />
 77                                                                                                                </td>
 78                                                                                                            </tr>
 79                                                                                                        </table>
 80                                                                                                    </div>
 81                                                                                                    <div style="height: 96px; line-height: 200%;">
 82                                                                                                        <table border="0" cellpadding="1" cellspacing="0">
 83                                                                                                            <tr>
 84                                                                                                                <td valign="middle" style="height: 23px;">
 85                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-1888&nbsp;&nbsp;<img
 86                                                                                                                        src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 87                                                                                                                            alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img
 88                                                                                                                                src="App_Themes/1001/Images/rank.gif" alt="" border="0" />
 89                                                                                                                </td>
 90                                                                                                            </tr>
 91                                                                                                            <tr>
 92                                                                                                                <td valign="middle" style="height: 23px;">
 93                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-1666&nbsp;&nbsp;<img
 94                                                                                                                        src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
 95                                                                                                                            alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img
 96                                                                                                                                src="App_Themes/1001/Images/rank.gif" alt="" border="0" />
 97                                                                                                                </td>
 98                                                                                                            </tr>
 99                                                                                                            <tr>
100                                                                                                                <td valign="middle" style="height: 23px;">
101                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-1234&nbsp;&nbsp;<img
102                                                                                                                        src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
103                                                                                                                            alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img
104                                                                                                                                src="App_Themes/1001/Images/rank.gif" alt="" border="0" />
105                                                                                                                </td>
106                                                                                                            </tr>
107                                                                                                            <tr>
108                                                                                                                <td valign="middle" style="height: 23px;">
109                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-1688&nbsp;&nbsp;<img
110                                                                                                                        src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
111                                                                                                                            alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img
112                                                                                                                                src="App_Themes/1001/Images/rank.gif" alt="" border="0" />
113                                                                                                                </td>
114                                                                                                            </tr>
115                                                                                                        </table>
116                                                                                                    </div>
117                                                                                                    <div style="height: 96px; line-height: 200%;">
118                                                                                                        <table border="0" cellpadding="1" cellspacing="0">
119                                                                                                            <tr>
120                                                                                                                <td valign="middle" style="height: 23px;">
121                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-1188&nbsp;&nbsp;<img
122                                                                                                                        src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
123                                                                                                                            alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img
124                                                                                                                                src="App_Themes/1001/Images/rank.gif" alt="" border="0" />
125                                                                                                                </td>
126                                                                                                            </tr>
127                                                                                                            <tr>
128                                                                                                                <td valign="middle" style="height: 23px;">
129                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-1618&nbsp;&nbsp;<img
130                                                                                                                        src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
131                                                                                                                            alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" />
132                                                                                                                </td>
133                                                                                                            </tr>
134                                                                                                            <tr>
135                                                                                                                <td valign="middle" style="height: 23px;">
136                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-1122&nbsp;&nbsp;<img
137                                                                                                                        src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
138                                                                                                                            alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" />
139                                                                                                                </td>
140                                                                                                            </tr>
141                                                                                                            <tr>
142                                                                                                                <td valign="middle" style="height: 23px;">
143                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-1112&nbsp;&nbsp;<img
144                                                                                                                        src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
145                                                                                                                            alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" />
146                                                                                                                </td>
147                                                                                                            </tr>
148                                                                                                        </table>
149                                                                                                    </div>
150                                                                                                    <div style="height: 96px; line-height: 200%;">
151                                                                                                        <table border="0" cellpadding="1" cellspacing="0">
152                                                                                                            <tr>
153                                                                                                                <td valign="middle" style="height: 24px;">
154                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-1515&nbsp;&nbsp;<img
155                                                                                                                        src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
156                                                                                                                            alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" />
157                                                                                                                </td>
158                                                                                                            </tr>
159                                                                                                            <tr>
160                                                                                                                <td valign="middle" style="height: 23px;">
161                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-1222&nbsp;&nbsp;<img
162                                                                                                                        src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
163                                                                                                                            alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" />
164                                                                                                                </td>
165                                                                                                            </tr>
166                                                                                                            <tr>
167                                                                                                                <td valign="middle" style="height: 23px;">
168                                                                                                                    &nbsp;<img src="/App_Themes/1001/Images/ar.gif" style="vertical-align: middle;" alt="" />&nbsp;&nbsp;4007007007-1212&nbsp;&nbsp;<img
169                                                                                                                        src="App_Themes/1001/Images/rank.gif" alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif"
170                                                                                                                            alt="" border="0" /><img src="App_Themes/1001/Images/rank.gif" alt="" border="0" />
171                                                                                                                </td>
172                                                                                                            </tr>
173                                                                                                        </table>
174                                                                                                    </div>
175                                                                                                </div>
176
177                                                                                                <script language="javascript" type="text/javascript">
178                                                                                                marqueesHeight2=96;
179                                                                                                stopscroll2=false;
180                                                                                                with(icefable2)
181                                                                                                {
182                                                                                                    style.width=0;
183                                                                                                    style.height=marqueesHeight2;
184                                                                                                    style.overflowX="visible";
185                                                                                                    style.overflowY="hidden";
186                                                                                                    noWrap=true;
187                                                                                                    onmouseover=new Function("stopscroll2=true");
188                                                                                                    onmouseout=new Function("stopscroll2=false");
189                                                                                                }
190                                                                                                preTop2=0; 
191                                                                                                currentTop2=marqueesHeight2; 
192                                                                                                stoptime2=0;
193                                                                                                icefable2.innerHTML+=icefable2.innerHTML;
194                                                                                                function init_srolltext2()
195                                                                                                {
196                                                                                                    icefable2.scrollTop=0;
197                                                                                                    setInterval("scrollUp2()",1);
198                                                                                                }
199                                                                                                init_srolltext2();
200
201                                                                                                function scrollUp2()
202                                                                                                {
203                                                                                                    if(stopscroll2==true) return;
204                                                                                                    currentTop2+=1;
205                                                                                                    if(currentTop2==marqueesHeight2+1)
206                                                                                                    {
207                                                                                                        stoptime2+=1;
208                                                                                                        currentTop2-=1;
209                                                                                                        if(stoptime2==500) 
210                                                                                                        {
211                                                                                                            currentTop2=0;
212                                                                                                            stoptime2=0;          
213                                                                                                        }
214                                                                                                    }
215                                                                                                    else
216                                                                                                    {      
217                                                                                                        preTop2=icefable2.scrollTop;
218                                                                                                        icefable2.scrollTop+=1;
219                                                                                                        if(preTop2==icefable2.scrollTop)
220                                                                                                        {
221                                                                                                            icefable2.scrollTop=marqueesHeight2;
222                                                                                                            icefable2.scrollTop+=1;
223                                                                                                        }
224                                                                                                    }                
225                                                                                                }
226                                                                                                init_srolltext2();
227                                                                                                </script>

        二  动态输出轮显内容

页面代码
 1<asp:Literal ID="ltlTelephone" runat="server"></asp:Literal>
 2
 3                                                                                                <script language="javascript" type="text/javascript">
 4                                                                                                marqueesHeight3=96;
 5                                                                                                stopscroll3=false;
 6                                                                                                with(icefable3)
 7                                                                                                {
 8                                                                                                    style.width=0;
 9                                                                                                    style.height=marqueesHeight3;
10                                                                                                    style.overflowX="visible";
11                                                                                                    style.overflowY="hidden";
12                                                                                                    noWrap=true;
13                                                                                                    onmouseover=new Function("stopscroll3=true");
14                                                                                                    onmouseout=new Function("stopscroll3=false");
15                                                                                                }
16                                                                                                preTop3=0; 
17                                                                                                currentTop3=marqueesHeight3; 
18                                                                                                stoptime3=0;
19                                                                                                icefable3.innerHTML+=icefable3.innerHTML;
20                                                                                                function init_srolltext3()
21                                                                                                {
22                                                                                                    icefable3.scrollTop=0;
23                                                                                                    setInterval("scrollUp3()",1);
24                                                                                                }
25                                                                                                init_srolltext3();
26
27                                                                                                function scrollUp3()
28                                                                                                {
29                                                                                                    if(stopscroll3==true) return;
30                                                                                                    currentTop3+=1;
31                                                                                                    if(currentTop3==marqueesHeight3+1)
32                                                                                                    {
33                                                                                                        stoptime3+=1;
34                                                                                                        currentTop3-=1;
35                                                                                                        if(stoptime3==800) 
36                                                                                                        {
37                                                                                                            currentTop3=0;
38                                                                                                            stoptime3=0;          
39                                                                                                        }
40                                                                                                    }
41                                                                                                    else
42                                                                                                    {      
43                                                                                                        preTop3=icefable3.scrollTop;
44                                                                                                        icefable3.scrollTop+=1;
45                                                                                                        if(preTop3==icefable3.scrollTop)
46                                                                                                        {
47                                                                                                            icefable3.scrollTop=marqueesHeight3;
48                                                                                                            icefable3.scrollTop+=1;
49                                                                                                        }
50                                                                                                    }                
51                                                                                                }
52                                                                                                init_srolltext3();
53                                                                                                </script>

实现方法
 1Telephone tlMain = new Telephone();
 2tlMain.LiteralTelephone(ltlTelephone, sqlConn);    
 3
 4// 首页循环显示列表
 5        public void LiteralTelephone(Literal ltDiv, SqlDatabaseConnection sqlConn)
 6        {
 7            ltDiv.Text = "<div id=\"icefable3\" style=\"width:200px;\">";
 8            string strSQL = "select iSysCode,cGUID,cTrueName,cNumber from Telephone where iStatusCode=3005001 ";
 9
10            SqlDataReader sqlReader = sqlConn.ExecuteReader(strSQL);
11            int count = 1;
12            while (sqlReader.Read())
13            {
14                if (count % 4 == 1)
15                {
16                    ltDiv.Text += "<div style=\"height:96px;line-height:200%;\"><table border=\"0\" cellpadding=\"1\" cellspacing=\"0\">";
17                }
18
19                ltDiv.Text += "<tr>    <td valign=\"middle\" style=\"height: 23px;\">&nbsp;<img src=\"/App_Themes/1001/Images/ar.gif\" style=\"vertical-align: middle;\" alt=\"\" />&nbsp;"+sqlReader.GetString(3)+"&nbsp;&nbsp;&nbsp;&nbsp;"+sqlReader.GetString(2)+"</td></tr>";
20
21                if (count % 4 == 0)
22                {
23                    ltDiv.Text += "</table></div>";
24                }
25                count++;
26            }
27            sqlReader.Close();
28            sqlReader.Dispose();
29
30            if (count % 4 != 1)
31            {
32                ltDiv.Text += "</table></div>";
33            }
34            ltDiv.Text += "</div>";
35        }