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 οnlοad="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 width: 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 width: 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 }
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 οnlοad="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 width: 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 width: 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 }
扫一扫
5357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
