Implement scrolling news with Jquery
- 2020-03-30 01:42:50
- OfStack
This article mainly USES Jquery to achieve the rolling news, so little code can achieve this function is really can not help but sigh the powerful function of 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. ScrollNews () is called every 2s after the mouseout event triggered by the mouse on the news.
//2. Stop calling scrollNews() after the mouseover event is triggered by the mouse
//3. The initial loading of the page triggers the mouseout event of the mouse on the news
$('div.scrollNews').hover(function () {
clearInterval(scrollTimer);
}, function () {
scrollTimer = setInterval(function () {
scrollNews();
}, delay);
}).triggerHandler('mouseout');
});
//Rolling news
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 Sweet loose sweater will be red this fall .">1 Sweet loose sweater will be red this fall .</a></li>
<li><a href="#" class="tooltip" title="2 Autumn outfit joker small vest less than 50 yuan .">2 Autumn outfit joker small vest less than 50 yuan .</a></li>
<li><a href="#" class="tooltip" title="3 Slim Korean version of the small suit ten thousand crazy grab .">3 Slim Korean version of the small suit ten thousand crazy grab .</a></li>
<li><a href="#" class="tooltip" title="4 Late summer chiffon shop owner tearful sale .">4 Late summer chiffon shop owner tearful sale .</a></li>
<li><a href="#" class="tooltip" title="5 Ruili crazy recommended autumn clothing .">5 Ruili crazy recommended autumn clothing .</a></li>
<li><a href="#" class="tooltip" title="6 Yuan long knit cardigans are selling like crazy .">6 Yuan long knit cardigans are selling like crazy .</a></li>
<li><a href="#" class="tooltip" title="7 Long - sleeved chiffon shirt is beautiful under single wear .">7 Long - sleeved chiffon shirt is beautiful under single wear .</a></li>
</ul>
</div>
</form>
</body>
</html>