当前位置:龙哥网 > 网络技术 > jquery向上滚动新闻鼠标悬停效果实现代码(jquery 鼠标悬停事件)

jquery向上滚动新闻鼠标悬停效果实现代码(jquery 鼠标悬停事件)

longge5个月前 (12-17)网络技术81

新闻自动向上滚动效果,鼠标悬停在新闻上时,停止滚动,鼠标离开则恢复滚动状态。方法是通过setInterval()和clearInterval()两个函数实现。

html代码

<div class="express">
	<ul>
		<li><a href="#" >滚动新闻标题一</a></li>
		<li><a href="#" >滚动新闻标题二</a></li>
		<li><a href="#" >滚动新闻标题三</a></li>
		<li><a href="#" >滚动新闻标题四</a></li>
	</ul>
</div>

CSS代码

.express {height:30px; overflow:hidden;}
.express ul {position:relative; overflow:hidden;}
.express li {font-size:16px; height:30px; line-height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

jQuery代码

<script>
function express(){
	var height = $('.express').find('li').height();
   $('.express').find('ul').animate({'marginTop':-height},1000,function(){
   		$(this).css('marginTop',0).children('li').eq(0).appendTo($(this));
		//因为第一个li移动到了最后面,那么当前的margin-top就是0
   });
}
$(function(){
	var express = setInterval(express, 3000);
   	$('.express li').hover(function(){
   		clearInterval(express); //鼠标悬停时,使用clearInterval停止执行	
   	},function(){
   		express = setInterval(express, 3000); //鼠标离开时,重新启用setInterval,注意:这里不要加var,这一句是给express重新附值,如果使用var就是定义了新变量express,那么clearInterval(express);就不生效或会出现异常。
   	});
});
</script>
免责声明
本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。#转载请注明出处!