Jquery 公告滚动+AJAX后台得到数据。

最新推荐文章于 2021-08-05 17:16:54 发布

qq_32444825

最新推荐文章于 2021-08-05 17:16:54 发布

阅读量474

点赞数

分类专栏：前端

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

ajax得到值，用JQUERY绑定给对应的UL.利用JQUERY的动画来实现他们的滚动公告。

aspx

复制代码

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" οnlοad="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 }