Jquery公告滾動+AJAX后臺得到數(shù)據(jù)
更新時間：2011年04月14日 21:39:14 作者：
ajax得到值，用JQUERY綁定給對應(yīng)的UL.利用JQUERY的動畫來實現(xiàn)他們的滾動公告。
aspx
<script src="http://www.cnblogs.com/js/jquery/jquery.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/js/common/jquery.timers.js" type="text/javascript"></script>
<script type="text/javascript">
var myar1;var myar2;
function Notice(){//定時器 熱門促銷
var pdata ="nameparam="+document.getElementById("nameparam").value+"¶m=1";
$.ajax({
url: "Util/MainUtil.aspx", //后臺處理類
type: "POST",
data: pdata,
dataType: "html",
timeout: 10000,
error: function(data) { },
success: function(data) {
//因為這個AJAX是定時器控制的，每過5分鐘就會自動去后臺刷新。取出最新數(shù)據(jù)。
//所有在重裝數(shù)據(jù)數(shù)據(jù)時，要先停止針對這些數(shù)據(jù)的所有動作。
$("#scrollDiv1").stop(true);
//在容器中輸出數(shù)據(jù)
$("#scrollDiv1>#ul1").innerHTML="";
//HTML（data）是Jquery的一個方法。是把HTML代碼解析并裝入
$("#scrollDiv1>#ul1").html(data);
//setInterval() 方法可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式。 <DIV class=spctrl></DIV> setInterval() 方法會不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。
//利用myar變量來控制輸出時的對應(yīng)的編號。然后接著那個編號執(zhí)行調(diào)用函數(shù)。 這樣，不會有那種替換數(shù)據(jù)時，滾動效果卡住的感覺。視覺效果好。
//雖然這樣有可能不是從第一個最新更新的公告開始顯示，有利有弊。
myar1 = setInterval('AutoScroll("#scrollDiv1")', 2000)
$("#scrollDiv1").hover(function() { clearInterval(myar1); }, function() { myar1 = setInterval('AutoScroll("#scrollDiv1")', 2000) }); //當(dāng)鼠標(biāo)放上去的時候，滾動停止，鼠標(biāo)離開的時候滾動開始
//HOVER 方法用來使當(dāng)你鼠標(biāo)停在滾動的某條數(shù)據(jù)時。響應(yīng)停止?jié)L動動作?？梢渣c擊去超鏈。
//后臺的那個函數(shù)：如果又移走鼠標(biāo)，則從剛才的變量編號開始滾動。
}
});
}
//定時器控制。每5分鐘針對某個容器執(zhí)行一次內(nèi)容的 更新
$(function() {
$("#ul1").everyTime(300000, function(i) {//每5分鐘執(zhí)行一次
Notice();
});
});
//其載入順序要注意。首先要等所有數(shù)據(jù)載入以后才可以。也就是AJAX填充之后，才能調(diào)用。那么window.onload或者在BODY中ONLOAD都可以
//但是$(<SPAN size="-1"><EM>document).ready</EM>和onload的有區(qū)別。$(<SPAN size="-1"><EM>document).ready是在DOM框架載入完成就執(zhí)行。我們要等待AJAX。所以這里不能用。</EM></SPAN></SPAN>
<SPAN size="-1">//這是$(<SPAN size="-1"><EM>document).ready比較穩(wěn)定的寫法。</EM></SPAN></SPAN>
<SPAN size="-1">//jQuery.noConflict(); jQuery(document).ready(function(){});<BR></SPAN>
//但有人說
//$(document).ready(function(){
// alert("hello");
//});(1)
// <body onload="alert('hello');">（2）
// 上面兩段代碼是等價的。但代碼1的好處是做到表現(xiàn)和邏輯分離。并且可以在不同的js文件中做相同的操作，即$(document).ready (fn)可以在一個頁面中重復(fù)出現(xiàn)，而不會//沖突?；旧螶query的很多plugin都是利用這個特性，正因為這個特性，多個plugin共同使用起來。
//window.onload = function() { Notice(); }
function Notice2(){//定時器 熱門促銷
var pdata ="nameparam="+document.getElementById("nameparam").value+"¶m=2";
$.ajax({
url: "Util/MainUtil.aspx", //后臺處理類
type: "POST",
data: pdata,
dataType: "html",
timeout: 10000,
error: function(data) { },
success: function(data) {
$("#scrollDiv2").stop(true);
$("#scrollDiv2>#ul2").innerHTML="";
//在容器中輸出數(shù)據(jù)
$("#scrollDiv2>#ul2").html(data);
myar2 = setInterval('AutoScroll("#scrollDiv2")', 2000)
$("#scrollDiv2").hover(function() { clearInterval(myar2); }, function() { myar2 = setInterval('AutoScroll("#scrollDiv2")', 2000) }); //當(dāng)鼠標(biāo)放上去的時候，滾動停止，鼠標(biāo)離開的時候滾動開始
}
});
}
$(function() {
$("#ul2").everyTime(300000, function(i) {//每5分鐘執(zhí)行一次
Notice2();
});
});
function AutoScroll(obj) {
$(obj).find("ul:first").animate({
marginTop: "-25px"
}, 500, function() {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
});
}
</script>
<style type="text/css">
ul, li
{
margin: 0;
padding: 0;
}
#scrollDiv1
{
width: 300px;
height: 25px;
line-height: 25px;
border: #ccc 0px solid;
overflow: hidden;
}
#scrollDiv1 li
{
height: 25px;
padding-left: 10px;
}
#scrollDiv2
{
width: 300px;
height: 25px;
line-height: 25px;
border: #ccc 0px solid;
overflow: hidden;
}
#scrollDiv2 li
{
height: 25px;
padding-left: 10px;
}
</style>
</head>
<body link="#000000" vlink="#000000" alink="#000000" onload="Notice();Notice2()">
<%--頭部部分--%>
<table style="margin-bottom: 4px" cellspacing="0" cellpadding="0" width="910" align="center"
border="0">
<tbody>
<tr>
<td width="910" height="100" background="images/LOGO.jpg">
<p align="center">
<b></b>
</td>
</tr>
<tr>
<td valign="bottom" background="images/bar.jpg" height="71">
<table height="71" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
<tbody>
<tr valign="middle">
<td width="8%" height="33">
<div align="right">
<font size="2">公告：</font></div>
</td>
<td width="46%" style="line-height: 145%">
<div align="left" id="scrollDiv1">
<ul id="ul1" >
</ul>
</div>
</td>
<td width="46%" height="33" style="line-height: 145%">
<div align="left" id="scrollDiv2" >
<ul id="ul2" >
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<%--頭部部分結(jié)束--%>
后臺Util/MainUtil.aspx.cs輸出對應(yīng)的 HTML 的數(shù)據(jù)
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
namespace Web.Util
{
public partial class MainUtil : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
try
{
int k = int.Parse(Request["param"].ToString());
switch (k)
{
case 1:
toOne();
break;
case 2:
toTwo();
break;
default:
break;
}
}
catch { }
}
private void toOne()
{
try
{
string st = String.Empty;
string companyName = Request["nameparam"].ToString();
DataTable dt1 = DBUtility.DbHelperSQL.Query("select top(5) Title,Id from 公告表 where TypeId='2' And Creater='" + companyName + "'order by CreatTime desc").Tables[0];
for (int i = 0; i < dt1.Rows.Count; i++)
{
//把公告做成超鏈接
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>";
}
showHtml(st);
}
catch { }
}
private void toTwo()
{
try
{
string st = String.Empty;
string companyName= Request["nameparam"].ToString();
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];
//把公告做成超鏈接
for (int i = 0; i < dt2.Rows.Count; i++)
{
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>";
}
showHtml(st);
}
catch { }
}
private void showHtml(string st){
Response.ContentType = "text/html";//text/html，和application/json 都是輸出格式
Response.Write(st);
Response.Flush();
Response.Close();
}
}
}
復(fù)制代碼 代碼如下:
<script src="http://www.cnblogs.com/js/jquery/jquery.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/js/common/jquery.timers.js" type="text/javascript"></script>
<script type="text/javascript">
var myar1;var myar2;
function Notice(){//定時器 熱門促銷
var pdata ="nameparam="+document.getElementById("nameparam").value+"¶m=1";
$.ajax({
url: "Util/MainUtil.aspx", //后臺處理類
type: "POST",
data: pdata,
dataType: "html",
timeout: 10000,
error: function(data) { },
success: function(data) {
//因為這個AJAX是定時器控制的，每過5分鐘就會自動去后臺刷新。取出最新數(shù)據(jù)。
//所有在重裝數(shù)據(jù)數(shù)據(jù)時，要先停止針對這些數(shù)據(jù)的所有動作。
$("#scrollDiv1").stop(true);
//在容器中輸出數(shù)據(jù)
$("#scrollDiv1>#ul1").innerHTML="";
//HTML（data）是Jquery的一個方法。是把HTML代碼解析并裝入
$("#scrollDiv1>#ul1").html(data);
//setInterval() 方法可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式。 <DIV class=spctrl></DIV> setInterval() 方法會不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。
//利用myar變量來控制輸出時的對應(yīng)的編號。然后接著那個編號執(zhí)行調(diào)用函數(shù)。 這樣，不會有那種替換數(shù)據(jù)時，滾動效果卡住的感覺。視覺效果好。
//雖然這樣有可能不是從第一個最新更新的公告開始顯示，有利有弊。
myar1 = setInterval('AutoScroll("#scrollDiv1")', 2000)
$("#scrollDiv1").hover(function() { clearInterval(myar1); }, function() { myar1 = setInterval('AutoScroll("#scrollDiv1")', 2000) }); //當(dāng)鼠標(biāo)放上去的時候，滾動停止，鼠標(biāo)離開的時候滾動開始
//HOVER 方法用來使當(dāng)你鼠標(biāo)停在滾動的某條數(shù)據(jù)時。響應(yīng)停止?jié)L動動作?？梢渣c擊去超鏈。
//后臺的那個函數(shù)：如果又移走鼠標(biāo)，則從剛才的變量編號開始滾動。
}
});
}
//定時器控制。每5分鐘針對某個容器執(zhí)行一次內(nèi)容的 更新
$(function() {
$("#ul1").everyTime(300000, function(i) {//每5分鐘執(zhí)行一次
Notice();
});
});
//其載入順序要注意。首先要等所有數(shù)據(jù)載入以后才可以。也就是AJAX填充之后，才能調(diào)用。那么window.onload或者在BODY中ONLOAD都可以
//但是$(<SPAN size="-1"><EM>document).ready</EM>和onload的有區(qū)別。$(<SPAN size="-1"><EM>document).ready是在DOM框架載入完成就執(zhí)行。我們要等待AJAX。所以這里不能用。</EM></SPAN></SPAN>
<SPAN size="-1">//這是$(<SPAN size="-1"><EM>document).ready比較穩(wěn)定的寫法。</EM></SPAN></SPAN>
<SPAN size="-1">//jQuery.noConflict(); jQuery(document).ready(function(){});<BR></SPAN>
//但有人說
//$(document).ready(function(){
// alert("hello");
//});(1)
// <body onload="alert('hello');">（2）
// 上面兩段代碼是等價的。但代碼1的好處是做到表現(xiàn)和邏輯分離。并且可以在不同的js文件中做相同的操作，即$(document).ready (fn)可以在一個頁面中重復(fù)出現(xiàn)，而不會//沖突?；旧螶query的很多plugin都是利用這個特性，正因為這個特性，多個plugin共同使用起來。
//window.onload = function() { Notice(); }
function Notice2(){//定時器 熱門促銷
var pdata ="nameparam="+document.getElementById("nameparam").value+"¶m=2";
$.ajax({
url: "Util/MainUtil.aspx", //后臺處理類
type: "POST",
data: pdata,
dataType: "html",
timeout: 10000,
error: function(data) { },
success: function(data) {
$("#scrollDiv2").stop(true);
$("#scrollDiv2>#ul2").innerHTML="";
//在容器中輸出數(shù)據(jù)
$("#scrollDiv2>#ul2").html(data);
myar2 = setInterval('AutoScroll("#scrollDiv2")', 2000)
$("#scrollDiv2").hover(function() { clearInterval(myar2); }, function() { myar2 = setInterval('AutoScroll("#scrollDiv2")', 2000) }); //當(dāng)鼠標(biāo)放上去的時候，滾動停止，鼠標(biāo)離開的時候滾動開始
}
});
}
$(function() {
$("#ul2").everyTime(300000, function(i) {//每5分鐘執(zhí)行一次
Notice2();
});
});
function AutoScroll(obj) {
$(obj).find("ul:first").animate({
marginTop: "-25px"
}, 500, function() {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
});
}
</script>
<style type="text/css">
ul, li
{
margin: 0;
padding: 0;
}
#scrollDiv1
{
width: 300px;
height: 25px;
line-height: 25px;
border: #ccc 0px solid;
overflow: hidden;
}
#scrollDiv1 li
{
height: 25px;
padding-left: 10px;
}
#scrollDiv2
{
width: 300px;
height: 25px;
line-height: 25px;
border: #ccc 0px solid;
overflow: hidden;
}
#scrollDiv2 li
{
height: 25px;
padding-left: 10px;
}
</style>
</head>
<body link="#000000" vlink="#000000" alink="#000000" onload="Notice();Notice2()">
<%--頭部部分--%>
<table style="margin-bottom: 4px" cellspacing="0" cellpadding="0" width="910" align="center"
border="0">
<tbody>
<tr>
<td width="910" height="100" background="images/LOGO.jpg">
<p align="center">
<b></b>
</td>
</tr>
<tr>
<td valign="bottom" background="images/bar.jpg" height="71">
<table height="71" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
<tbody>
<tr valign="middle">
<td width="8%" height="33">
<div align="right">
<font size="2">公告：</font></div>
</td>
<td width="46%" style="line-height: 145%">
<div align="left" id="scrollDiv1">
<ul id="ul1" >
</ul>
</div>
</td>
<td width="46%" height="33" style="line-height: 145%">
<div align="left" id="scrollDiv2" >
<ul id="ul2" >
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<%--頭部部分結(jié)束--%>
后臺Util/MainUtil.aspx.cs輸出對應(yīng)的 HTML 的數(shù)據(jù)
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
namespace Web.Util
{
public partial class MainUtil : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
try
{
int k = int.Parse(Request["param"].ToString());
switch (k)
{
case 1:
toOne();
break;
case 2:
toTwo();
break;
default:
break;
}
}
catch { }
}
private void toOne()
{
try
{
string st = String.Empty;
string companyName = Request["nameparam"].ToString();
DataTable dt1 = DBUtility.DbHelperSQL.Query("select top(5) Title,Id from 公告表 where TypeId='2' And Creater='" + companyName + "'order by CreatTime desc").Tables[0];
for (int i = 0; i < dt1.Rows.Count; i++)
{
//把公告做成超鏈接
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>";
}
showHtml(st);
}
catch { }
}
private void toTwo()
{
try
{
string st = String.Empty;
string companyName= Request["nameparam"].ToString();
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];
//把公告做成超鏈接
for (int i = 0; i < dt2.Rows.Count; i++)
{
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>";
}
showHtml(st);
}
catch { }
}
private void showHtml(string st){
Response.ContentType = "text/html";//text/html，和application/json 都是輸出格式
Response.Write(st);
Response.Flush();
Response.Close();
}
}
}
您可能感興趣的文章:
- jquery實現(xiàn)表格無縫滾動
- Jquery原生態(tài)實現(xiàn)表格header頭隨滾動條滾動而滾動
- asp.net+jquery滾動滾動條加載數(shù)據(jù)的下拉控件
- jquery滾動組件(vticker.js)實現(xiàn)頁面動態(tài)數(shù)據(jù)的滾動效果
- 基于jquery實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
- js/jquery控制頁面動態(tài)加載數(shù)據(jù) 滑動滾動條自動加載事件的方法
- jquery滾動加載數(shù)據(jù)的方法
- 使用jQuery或者原生js實現(xiàn)鼠標(biāo)滾動加載頁面新數(shù)據(jù)
- 拉動滾動條加載數(shù)據(jù)的jquery代碼
- jQuery實現(xiàn)表格行數(shù)據(jù)滾動效果
相關(guān)文章
這篇文章主要介紹了 jQuery自定義插件詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-12-12
非常不錯的模擬 圖片裁剪效果的實現(xiàn)代碼，文件都是腳本之家本地的，大家可以直接另存為就可以了。2009-05-05
下面小編就為大家?guī)硪黄褂肑Query選擇HTML遍歷函數(shù)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
Pinterest使用一種新的方式布局取得成功之后，們把他叫做瀑布流，國內(nèi)現(xiàn)有美麗說，蘑菇街，花瓣等代表的網(wǎng)站接下來為你介紹一個juqery的插件masonry的使用，感興趣的你可以參考下哈2013-03-03
jquery插件制作 自增長輸入框?qū)崿F(xiàn)代碼
本章我們將創(chuàng)建一個自增長的輸入框插件，jquery.aotogrow.js2012-08-08
jQuery實現(xiàn)表單動態(tài)添加數(shù)據(jù)并提交的方法
這篇文章主要介紹了jQuery實現(xiàn)表單動態(tài)添加數(shù)據(jù)并提交的方法,結(jié)合實例形式總結(jié)分析了jQuery針對存在form表單的添加、提交,不存在form表單的添加、提交,ajax、非ajax形式提交等數(shù)據(jù)添加與表單提交操作技巧,需要的朋友可以參考下2018-07-07
本文通過具體的實例向我們簡單介紹了jQuery的事件委托的實現(xiàn)方式，十分的簡單實用，有需要的小伙伴可以參考下。2015-07-07
08年的時候裝上ubuntu試用了一下，發(fā)現(xiàn)里面自帶了一個數(shù)獨游戲，索性自己用jquery做了一個數(shù)獨游戲。2010-10-10
這篇文章主要介紹了jQuery基于圖層模仿五星星評價功能的方法,使用jQuery動態(tài)修改元素背景色的方法實現(xiàn)星評功能,需要的朋友可以參考下2015-05-05
接著上次tabs的學(xué)習(xí)，今天繼續(xù)jquery tools六大功能的第二個功能——tooltip的學(xué)習(xí)。2009-07-07