This article mainly uses jquery to achieve scrolling news, so few code can realize this function is really can't help exclaiming jquery's powerful function.
<%@ 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 ">
<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. Mouse on the news triggered mouseout event every 2s call scrollnews ()
2. Stop calling Scrollnews () after the MouseOver event is triggered by the mouse on the news
3. The first load page triggers the mouse to the news mouseout event
$ (' 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 '}, +, function () {
$news. css ({margin:0}). Find (' Li:first '). Appendto ($news);
});
}
</script>
<body>
<form id= "Form1" runat= "Server" >
<div class= "Scrollnews" >
<ul>
<li><a href= "#" class= "tooltip" title= "1 sweet baggy sweater must be red this autumn." >1 Sweet loose sweater must be red in the autumn .</a></li>
<li><a href= "#" class= "tooltip" title= "2 autumn outfit hundred small vest less than 50 yuan." >2 autumn outfit hundred small vest less than 50 yuan .</a></li>
<li><a href= "#" class= "tooltip" title= "3 self-cultivation Korean version of the small suit million people crazy Rob." >3 self-cultivation Korean version of the small suit million people crazy Rob .</a></li>
<li><a href= "#" class= "tooltip" title= "4 late summer chiffon shopkeeper tearful big sale." >4 late summer chiffon shopkeeper tearful big sale .</a></li>
<li><a href= "#" class= "tooltip" title= "5 Ruili are wildly recommended autumn outfit." >5 Ruili are wildly recommended autumn outfit .</a></li>
<li><a href= "#" class= "tooltip" title= "6 yuan large knitted small shirts sell crazy." >6 yuan knitted small shirts selling crazy .</a></li>
<li><a href= "#" class= "tooltip" title= "7 long sleeve chiffon shirts are all super beautiful in a single dress." >7 long sleeve chiffon sweater single wear inside the lap is super beautiful .</a></li>
</ul>
</div>
</form>
</body>
