您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
用Jquery实现滚动新闻
作者：佚名 责任编辑：admin 更新时间：2022-06-22
此文主要用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实现手机发送验证码的倒计时代码
- 下一个程序编程： js弹出div并显示遮罩层
