首页 / JQUERY / 用Jquery实现滚动新闻

用Jquery实现滚动新闻

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了用Jquery实现滚动新闻，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2009字，纯文字阅读大概需要3分钟。

内容图文

此文主要用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实现滚动新闻全部内容，希望文章能够帮你解决用Jquery实现滚动新闻所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/363425.html

来源：【匿名】