新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

此文主要用Jquery实现滚动新闻

用Jquery完结滚动新闻

 此文主要用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" "; 

 

<html xmlns="; 

<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的强硬功效,几行代码就能够兑现,要求的敌人能够参照他事他说加以考察下 此文首要用Jquery达成滚动...

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于www.301net,转载请注明出处:此文主要用Jquery实现滚动新闻

您可能还会对下面的文章感兴趣: