jquery实现滚动新闻

ciaos

浏览: 296962 次
性别:
来自: 深圳

最近访客更多访客>>

smoking_boy

yangyongjie

muyuan

dongguangming88

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

效果如下：

源码如下：

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Try JQuery</title>
		<link rel="stylesheet" href="styles/main.css" type="text/css" />
	</head>
	<body>
		<div id="main_container">
			<h3>最新动态</h3>
			<div class="scrollnews" >
				<ul>
					<li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
					<li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
					<li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
					<li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
					<li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
					<li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
					<li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
				</ul>
			</div>
		</div>
		<script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
		<script src="scripts/main.js" type="text/javascript"></script>
	</body>
</html>

styles/main.css

/*
 base css
*/

* {
	margin: 0;
	padding: 0;
}

ul, li {
	list-style: none outside none;
}

.clear {
	clear: both;
}

/*
 page css
*/

#main_container {
	background-color: #eeeeee;
	width: 960px;
	margin: 0 auto;
}

.scrollnews {
	width: 200px;
	height: 85px;
	overflow: hidden;
	background-color: yellow;
}

.scrollnews ul li {
	position: relative;
}

#scrollnews ul li a {
	display: block;
	background: #eeeeee;
	font-weight: 700;
}

#scrollnews ul li a:hover {
	background: none;
	color: red;
}

scripts/main.js

$(function(){
	var scrollNews = function( obj ){
		var $self = obj.find("ul:first"); 
		var lineHeight = $self.find("li:first").height();
		$self.animate({ "marginTop" : -lineHeight +"px" }, 600 , function(){
			$self.css({marginTop:0}).find("li:first").appendTo($self);
		})
	}
	var $this = $(".scrollnews");
	var scrollTimer;
	$this.hover(function(){
			clearInterval(scrollTimer);
		},function(){
			scrollTimer = setInterval(function(){
			scrollNews( $this );
		}, 3000 );
	}).trigger("mouseleave");
});