萬盛學電腦網 >> 腳本專題 >> javascript >> 用Jquery實現滾動新聞
用Jquery實現滾動新聞
此文主要用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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved