Jquery中文網 www.twdanq.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 用Jquery實現滾動新聞

用Jquery實現滾動新聞

發布時間:2014-07-01   編輯:www.twdanq.live
此文主要用Jquery實現滾動新聞,Jquery的強大功能,幾行代碼即可實現,需要的朋友可以參考下
此文主要用jquery實現滾動新聞,如此少的代碼就能實現這個功能真的是不由得感嘆Jquery的強大功能。
復制代碼 代碼如下:

<%@ 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.鼠標對新聞觸發mouseout事件后每2s調用scrollNews()
//2.鼠標對新聞觸發mouseover事件后停止調用scrollNews()
//3.初次加載頁面觸發鼠標對新聞的mouseout事件
$('div.scrollNews').hover(function () {
clearInterval(scrollTimer);
}, function () {
scrollTimer = setInterval(function () {
scrollNews();
}, delay);
}).triggerHandler('mouseout');
});
//滾動新聞
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長袖雪紡衫單穿內搭都超美.">7長袖雪紡衫單穿內搭都超美.</a></li>
</ul>
</div>
</form>
</body>
</html>

您可能感興趣的文章:
基于jquery的滾動新聞列表
Javascrip 滾動新聞效果代碼實例(相對定位與iframe二種方式)
jquery.blockUI.js上傳滾動等待效果實現思路及代碼
jquery滾動組件(vticker.js)實現頁面動態數據的滾動效果
jQuery新聞滾動插件 jquery.roller.js
jQuery 標題的自動翻轉實現代碼
JQUERY 實現窗口滾動搜索框停靠效果(類似滾動停靠)
jQuery創建平滑的頁面滾動(頂部或底部)
用Jquery實現滾動新聞
jquery無縫向上滾動實現代碼

關鍵詞: Jquery  滾動   
[關閉]
广西快乐10分怎样开奖号码