用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)對新聞?dòng)|發(fā)mouseout事件后每2s調(diào)用scrollNews() 
//2.鼠標(biāo)對新聞?dòng)|發(fā)mouseover事件后停止調(diào)用scrollNews() 
//3.初次加載頁面觸發(fā)鼠標(biāo)對新聞的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修身韓版小西裝萬人瘋搶.">3修身韓版小西裝萬人瘋搶.</a></li> 
<li><a href="#" class="tooltip" title="4夏末雪紡店主含淚大甩賣.">4夏末雪紡店主含淚大甩賣.</a></li> 
<li><a href="#" class="tooltip" title="5瑞麗都瘋狂推薦的秋裝.">5瑞麗都瘋狂推薦的秋裝.</a></li> 
<li><a href="#" class="tooltip" title="6元長款針織小開衫賣瘋啦.">6元長款針織小開衫賣瘋啦.</a></li> 
<li><a href="#" class="tooltip" title="7長袖雪紡衫單穿內(nèi)搭都超美.">7長袖雪紡衫單穿內(nèi)搭都超美.</a></li> 
</ul> 
</div> 
</form> 
</body> 
</html> 