jQuery教程：一款很实用的无缝滚动新闻列表

最新推荐文章于 2023-03-28 11:22:56 发布

iteye_2766

最新推荐文章于 2023-03-28 11:22:56 发布

阅读量156

点赞数

分类专栏：【jQuery】文章标签： jQuery CSS HTML ViewUI

【jQuery】专栏收录该内容

8 篇文章 0 订阅

订阅专栏

[color=red]最近在看jQuery，刚开始还看的很懂，越往后越难哦！！
要加油的研究哦！！[/color]
[b]css样式：[/b]

.scrollNews{width:200px;height:85px;line-height:20px;overflow:hidden;background:#FFFFFF;margin:5px 15px;}
.scrollNews ul li a{ display:block; line-height:22px; color:#3366CC; text-decoration:none;}
.scrollNews ul li a:hover{ text-decoration:underline;}

[b]html代码[/b]

<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>

[b]js文件[/b]

/*新闻滚动*/
$(function(){
        var $this = $(".scrollNews");
		var scrollTimer;
		$this.hover(function(){
			  clearInterval(scrollTimer);
		 },function(){
		   scrollTimer = setInterval(function(){
						 scrollNews( $this );
					}, 3000 );
		}).trigger("mouseleave");
});
function scrollNews(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); //appendTo能直接移动元素
   })
}