JQuery文字向上滾動鼠標(biāo)移入懸停,移出繼續(xù)滾動特效代碼如下:
HTML結(jié)構(gòu):
<div id="scrollDiv" class="scrollDiv">
<ul>
<li><a href="#" title="第一行文字內(nèi)容……">第一行文字內(nèi)容…… <span class="time">2024-10-14</span></a></li>
<li><a href="#" title="第二行文字內(nèi)容……">第二行文字內(nèi)容……  <span class="time">2024-10-09</span></a></li>
<li><a href="#" title="第三行文字內(nèi)容……">第三行文字內(nèi)容……  <span class="time">2024-09-26</span></a></li>
<li><a href="#" title="第四行文字內(nèi)容……">第四行文字內(nèi)容……  <span class="time">2024-09-20</span></a></li>
<li><a href="#" title="第五行文字內(nèi)容……">第五行文字內(nèi)容……  <span class="time">2024-09-20</span></a></li>
</ul>
</div>
CSS結(jié)構(gòu):
.scrollDiv{
	float: left;
	height:25px;/* 必要元素 */
	line-height:25px;
	overflow:hidden;/* 必要元素 */
}
.scrollDiv li{
	height:25px;
}
.scrollDiv li a{
	color: #000; 
	font-size: 16px;
}
JQuery結(jié)構(gòu):
<script type="text/javascript">
function AutoScroll(obj){
	$(obj).find("ul:first").animate({
	marginTop:"-25px"
	},500,function(){
	$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
	});
}
$(document).ready(function(){
	var interval = setInterval('AutoScroll("#scrollDiv")',3000);
	// 鼠標(biāo)懸停效果
	$('#scrollDiv').hover(function() {
	clearInterval(interval);
	}, function() {
	interval = setInterval('AutoScroll("#scrollDiv")',3000);
	});
});
</script> 



 鄂公網(wǎng)安備 42090202000212號
鄂公網(wǎng)安備 42090202000212號