用Jquery實(shí)現(xiàn)滾動(dòng)新聞
更新時(shí)間:2014年02月12日 17:39:58 作者:
此文主要用Jquery實(shí)現(xiàn)滾動(dòng)新聞,Jquery的強(qiáng)大功能,幾行代碼即可實(shí)現(xiàn),需要的朋友可以參考下
此文主要用Jquery實(shí)現(xiàn)滾動(dòng)新聞,如此少的代碼就能實(shí)現(xiàn)這個(gè)功能真的是不由得感嘆Jquery的強(qiáng)大功能。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication244.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
var scrollTimer = null;
var delay = 2000;
//1.鼠標(biāo)對(duì)新聞?dòng)|發(fā)mouseout事件后每2s調(diào)用scrollNews()
//2.鼠標(biāo)對(duì)新聞?dòng)|發(fā)mouseover事件后停止調(diào)用scrollNews()
//3.初次加載頁(yè)面觸發(fā)鼠標(biāo)對(duì)新聞的mouseout事件
$('div.scrollNews').hover(function () {
clearInterval(scrollTimer);
}, function () {
scrollTimer = setInterval(function () {
scrollNews();
}, delay);
}).triggerHandler('mouseout');
});
//滾動(dòng)新聞
function scrollNews() {
var $news = $('div.scrollNews>ul');
var $lineHeight = $news.find('li:first').height();
$news.animate({ 'marginTop': -$lineHeight + 'px' }, 600, function () {
$news.css({ margin: 0 }).find('li:first').appendTo($news);
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="scrollNews" >
<ul>
<li><a href="#" class="tooltip" title="1甜美寬松毛衣今秋一定紅.">1甜美寬松毛衣今秋一定紅.</a></li>
<li><a href="#" class="tooltip" title="2秋裝百搭小馬甲不到50元.">2秋裝百搭小馬甲不到50元.</a></li>
<li><a href="#" class="tooltip" title="3修身韓版小西裝萬(wàn)人瘋搶.">3修身韓版小西裝萬(wàn)人瘋搶.</a></li>
<li><a href="#" class="tooltip" title="4夏末雪紡店主含淚大甩賣(mài).">4夏末雪紡店主含淚大甩賣(mài).</a></li>
<li><a href="#" class="tooltip" title="5瑞麗都瘋狂推薦的秋裝.">5瑞麗都瘋狂推薦的秋裝.</a></li>
<li><a href="#" class="tooltip" title="6元長(zhǎng)款針織小開(kāi)衫賣(mài)瘋啦.">6元長(zhǎng)款針織小開(kāi)衫賣(mài)瘋啦.</a></li>
<li><a href="#" class="tooltip" title="7長(zhǎng)袖雪紡衫單穿內(nèi)搭都超美.">7長(zhǎng)袖雪紡衫單穿內(nèi)搭都超美.</a></li>
</ul>
</div>
</form>
</body>
</html>
復(fù)制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication244.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
var scrollTimer = null;
var delay = 2000;
//1.鼠標(biāo)對(duì)新聞?dòng)|發(fā)mouseout事件后每2s調(diào)用scrollNews()
//2.鼠標(biāo)對(duì)新聞?dòng)|發(fā)mouseover事件后停止調(diào)用scrollNews()
//3.初次加載頁(yè)面觸發(fā)鼠標(biāo)對(duì)新聞的mouseout事件
$('div.scrollNews').hover(function () {
clearInterval(scrollTimer);
}, function () {
scrollTimer = setInterval(function () {
scrollNews();
}, delay);
}).triggerHandler('mouseout');
});
//滾動(dòng)新聞
function scrollNews() {
var $news = $('div.scrollNews>ul');
var $lineHeight = $news.find('li:first').height();
$news.animate({ 'marginTop': -$lineHeight + 'px' }, 600, function () {
$news.css({ margin: 0 }).find('li:first').appendTo($news);
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="scrollNews" >
<ul>
<li><a href="#" class="tooltip" title="1甜美寬松毛衣今秋一定紅.">1甜美寬松毛衣今秋一定紅.</a></li>
<li><a href="#" class="tooltip" title="2秋裝百搭小馬甲不到50元.">2秋裝百搭小馬甲不到50元.</a></li>
<li><a href="#" class="tooltip" title="3修身韓版小西裝萬(wàn)人瘋搶.">3修身韓版小西裝萬(wàn)人瘋搶.</a></li>
<li><a href="#" class="tooltip" title="4夏末雪紡店主含淚大甩賣(mài).">4夏末雪紡店主含淚大甩賣(mài).</a></li>
<li><a href="#" class="tooltip" title="5瑞麗都瘋狂推薦的秋裝.">5瑞麗都瘋狂推薦的秋裝.</a></li>
<li><a href="#" class="tooltip" title="6元長(zhǎng)款針織小開(kāi)衫賣(mài)瘋啦.">6元長(zhǎng)款針織小開(kāi)衫賣(mài)瘋啦.</a></li>
<li><a href="#" class="tooltip" title="7長(zhǎng)袖雪紡衫單穿內(nèi)搭都超美.">7長(zhǎng)袖雪紡衫單穿內(nèi)搭都超美.</a></li>
</ul>
</div>
</form>
</body>
</html>
您可能感興趣的文章:
- Flash+XML滾動(dòng)新聞代碼 無(wú)圖片 附源碼下載
- 經(jīng)典的間隔時(shí)間滾動(dòng)新聞(圖片),可控制滾動(dòng)
- 基于jquery的滾動(dòng)新聞列表
- jQuery循環(huán)滾動(dòng)新聞列表示例代碼
- jQuery實(shí)現(xiàn)列表自動(dòng)滾動(dòng)循環(huán)滾動(dòng)展示新聞
- javaScript實(shí)現(xiàn)滾動(dòng)新聞的方法
- WinForm實(shí)現(xiàn)仿視頻播放器左下角滾動(dòng)新聞效果的方法
- jQuery實(shí)現(xiàn)自動(dòng)與手動(dòng)切換的滾動(dòng)新聞特效代碼分享
相關(guān)文章
jQuery基于正則表達(dá)式的表單驗(yàn)證功能示例
這篇文章主要介紹了jQuery基于正則表達(dá)式的表單驗(yàn)證功能,包括針對(duì)字符串、郵件、網(wǎng)址、電話等常見(jiàn)正則驗(yàn)證操作技巧,需要的朋友可以參考下2017-01-01簡(jiǎn)單的代碼實(shí)現(xiàn)jquery定時(shí)器
項(xiàng)目遇到一個(gè)消息的模塊,在導(dǎo)航條最上面.想實(shí)現(xiàn),當(dāng)收到消息的時(shí)候能夠及時(shí)的刷新,顯示收到消息的條數(shù),下面為大家介紹兩種不錯(cuò)的方法,感興趣的朋友可以參考下2014-01-01jQuery插件FusionCharts繪制的3D環(huán)餅圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D環(huán)餅圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用FusionCharts載入xml格式數(shù)據(jù)繪制圖形的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04jQuery插件FusionCharts繪制2D柱狀圖和折線圖的組合圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制2D柱狀圖和折線圖的組合圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用插件FusionCharts載入xml格式數(shù)據(jù)繪制柱狀圖與折線圖組合圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04jQuery如何跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè) 就這么簡(jiǎn)單
這篇文章主要介紹了如何在jQuery中跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)HTML,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12Jquery知識(shí)點(diǎn)二 jquery下對(duì)數(shù)組的操作
眾所周知,Jquery是對(duì)JavaScript的一種高效的封裝,所以Jquery要操作的數(shù)組即是JavaScript中的數(shù)組,在JavaScript中我們使用for以及for-in進(jìn)行數(shù)組的操作,而在Jquery中則使用$.map()、$.each()來(lái)操作數(shù)組2011-01-01jquery EasyUI的formatter格式化函數(shù)代碼
以下實(shí)例格式化數(shù)據(jù)表格中的一列。如果金額小于20時(shí)使用自定義的格式器將文本變成紅色。2011-01-01