DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 用Jquery實現滾動新聞
用Jquery實現滾動新聞
編輯:JavaScript綜合知識     

 此文主要用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> 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved