ajax得到值，用JQUERY绑定给对应的UL.利用JQUERY的动画来实现他们的滚动公告。
aspx
View Code
1 <script src="http://www.cnblogs.com/js/jquery/jquery.js" type="text/javascript"></script>
2 <script src="http://www.cnblogs.com/js/common/jquery.timers.js" type="text/javascript"></script>
3
4
5 <script type="text/javascript">
6 var myar1;var myar2;
7
8
9 function Notice(){//定时器 热门促销
10 var pdata ="nameparam="+document.getElementById("nameparam").value+"¶m=1";
11 $.ajax({
12 url: "Util/MainUtil.aspx", //后台处理类
13 type: "POST",
14 data: pdata,
15 dataType: "html",
16 timeout: 10000,
17 error: function(data) { },
18 success: function(data) {
19 //因为这个AJAX是定时器控制的，每过5分钟就会自动去后台刷新。取出最新数据。//所有在重装数据数据时，要先停止针对这些数据的所有动作。 $("#scrollDiv1").stop(true);
20 //在容器中输出数据
21 $("#scrollDiv1>#ul1").innerHTML="";
22 //HTML（data）是Jquery的一个方法。是把HTML代码解析并装入 $("#scrollDiv1>#ul1").html(data);
23 //setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 //利用myar变量来控制输出时的对应的编号。然后接着那个编号执行调用函数。 这样，不会有那种替换数据时，滚动效果卡住的感觉。视觉效果好。//虽然这样有可能不是从第一个最新更新的公告开始显示，有利有弊。 myar1 = setInterval('AutoScroll("#scrollDiv1")', 2000)
24 $("#scrollDiv1").hover(function() { clearInterval(myar1); }, function() { myar1 = setInterval('AutoScroll("#scrollDiv1")', 2000) }); //当鼠标放上去的时候，滚动停止，鼠标离开的时候滚动开始
25
26 //HOVER 方法用来使当你鼠标停在滚动的某条数据时。响应停止滚动动作。可以点击去超链。//后台的那个函数：如果又移走鼠标，则从刚才的变量编号开始滚动。 }
27 });
28 }
29
30 //定时器控制。每5分钟针对某个容器执行一次内容的 更新 $(function() {
31 $("#ul1").everyTime(300000, function(i) {//每5分钟执行一次
32 Notice();
33 });
34 });
35 //其载入顺序要注意。首先要等所有数据载入以后才可以。也就是AJAX填充之后，才能调用。那么window.onload或者在BODY中ONLOAD都可以//但是$(document).ready和onload的有区别。$(document).ready是在DOM框架载入完成就执行。我们要等待AJAX。所以这里不能用。//这是$(document).ready比较稳定的写法。//jQuery.noConflict(); jQuery(document).ready(function(){});
36 //但有人说
37 //$(document).ready(function(){
38 // alert("hello");
39 //});(1)
40 // <body onload="alert('hello');">（2）
41 // 上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作，即$(document).ready (fn)可以在一个页面中重复出现，而不会//冲突。基本上Jquery的很多plugin都是利用这个特性，正因为这个特性，多个plugin共同使用起来。
42 //window.onload = function() { Notice(); }
43 function Notice2(){//定时器 热门促销
44 var pdata ="nameparam="+document.getElementById("nameparam").value+"¶m=2";
45 $.ajax({
46 url: "Util/MainUtil.aspx", //后台处理类
47 type: "POST",
48 data: pdata,
49 dataType: "html",
50 timeout: 10000,
51 error: function(data) { },
52 success: function(data) {
53 $("#scrollDiv2").stop(true);
54 $("#scrollDiv2>#ul2").innerHTML="";
55 //在容器中输出数据
56
57 $("#scrollDiv2>#ul2").html(data);
58 myar2 = setInterval('AutoScroll("#scrollDiv2")', 2000)
59 $("#scrollDiv2").hover(function() { clearInterval(myar2); }, function() { myar2 = setInterval('AutoScroll("#scrollDiv2")', 2000) }); //当鼠标放上去的时候，滚动停止，鼠标离开的时候滚动开始
60
61 }
62 });
63 }
64
65 $(function() {
66 $("#ul2").everyTime(300000, function(i) {//每5分钟执行一次
67 Notice2();
68 });
69 });
70
71 function AutoScroll(obj) {
72
73 $(obj).find("ul:first").animate({
74 marginTop: "-25px"
75 }, 500, function() {
76 $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
77 });
78 }
79 </script>
80 <style type="text/css">
81 ul, li
82 {
83 margin: 0;
84 padding: 0;
85 }
86 #scrollDiv1
87 {
88 300px;
89 height: 25px;
90 line-height: 25px;
91 border: #ccc 0px solid;
92 overflow: hidden;
93 }
94 #scrollDiv1 li
95 {
96 height: 25px;
97 padding-left: 10px;
98 }
99 #scrollDiv2
100 {
101 300px;
102 height: 25px;
103 line-height: 25px;
104 border: #ccc 0px solid;
105 overflow: hidden;
106 }
107 #scrollDiv2 li
108 {
109 height: 25px;
110 padding-left: 10px;
111 }
112 </style>
113
114 </head>
115 <body link="#000000" vlink="#000000" alink="#000000" onload="Notice();Notice2()">
116 <%--头部部分--%>
117 <table style="margin-bottom: 4px" cellspacing="0" cellpadding="0" width="910" align="center"
118 border="0">
119 <tbody>
120 <tr>
121 <td width="910" height="100" background="images/LOGO.jpg">
122 <p align="center">
123 <b></b>
124 </td>
125 </tr>
126 <tr>
127 <td valign="bottom" background="images/bar.jpg" height="71">
128 <table height="71" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
129 <tbody>
130 <tr valign="middle">
131 <td width="8%" height="33">
132 <div align="right">
133 <font size="2">公告：</font></div>
134 </td>
135 <td width="46%" style="line-height: 145%">
136 <div align="left" id="scrollDiv1">
137 <ul id="ul1" >
138
139
140 </ul>
141 </div>
142 </td>
143 <td width="46%" height="33" style="line-height: 145%">
144 <div align="left" id="scrollDiv2" >
145 <ul id="ul2" >
146
147
148 </ul>
149 </div>
150 </td>
151 </tr>
152 </tbody>
153 </table>
154 </td>
155 </tr>
156 </tbody>
157 </table>
158 <%--头部部分结束--%>
159 后台Util/MainUtil.aspx.cs输出对应的 HTML 的数据
160
161 using System;
162 using System.Collections;
163 using System.Configuration;
164 using System.Data;
165 using System.Linq;
166 using System.Web;
167 using System.Web.Security;
168 using System.Web.UI;
169 using System.Web.UI.HtmlControls;
170 using System.Web.UI.WebControls;
171 using System.Web.UI.WebControls.WebParts;
172 using System.Xml.Linq;
173
174 namespace Web.Util
175 {
176 public partial class MainUtil : System.Web.UI.Page
177 {
178 protected void Page_Load(object sender, EventArgs e)
179 {
180 try
181 {
182 int k = int.Parse(Request["param"].ToString());
183 switch (k)
184 {
185 case 1:
186
187 toOne();
188
189 break;
190 case 2:
191 toTwo();
192 break;
193 default:
194 break;
195
196
197 }
198 }
199 catch { }
200
201
202
203 }
204
205 private void toOne()
206 {
207 try
208 {
209 string st = String.Empty;
210 string companyName = Request["nameparam"].ToString();
211 DataTable dt1 = DBUtility.DbHelperSQL.Query("select top(5) Title,Id from 公告表 where TypeId='2' And Creater='" + companyName + "'order by CreatTime desc").Tables[0];
212 for (int i = 0; i < dt1.Rows.Count; i++)
213 {
214 //把公告做成超链接
215 st += "<li><b> <a style='color: #000000' href='Detail.aspx?CommpanyServer=2&Company=" + companyName + "&id=" + dt1.Rows[i]["Id"].ToString() + "' target='_blank'> <font color='#FF3300'>" + dt1.Rows[i]["Title"].ToString() + "</font></a></b></li>";
216
217
218 }
219 showHtml(st);
220 }
221 catch { }
222
223 }
224
225 private void toTwo()
226 {
227 try
228 {
229 string st = String.Empty;
230
231 string companyName= Request["nameparam"].ToString();
232
233 DataTable dt2= DBUtility.DbHelperSQL.Query("select top(5) Title,Id from 公告表 where Id IN (select top 10 Id from 公告表 where TypeId='2' And Creater='"+companyName+"'order by CreatTime desc) order by CreatTime asc").Tables[0];
234
235 //把公告做成超链接
236
237 for (int i = 0; i < dt2.Rows.Count; i++)
238 {
239
240 st += "<li><b> <a style='color: #000000' href='Detail.aspx?CommpanyServer=2&Company=" + companyName + "&id=" + dt2.Rows[i]["Id"].ToString() + "' target='_blank'><font color='#FF3300'>" + dt2.Rows[i]["Title"].ToString() + "</font></a></b></li>";
241
242
243 }
244 showHtml(st);
245 }
246 catch { }
247 }
248
249
250
251 private void showHtml(string st){
252 Response.ContentType = "text/html";//text/html，和application/json 都是输出格式
253
254 Response.Write(st);
255 Response.Flush();
256 Response.Close();
257
258
259 }
260 }
261 }