js实现文字垂直滚动和鼠标悬停效果
本文实例介绍了文字垂直滚动效果，主要运用了setInterval(function(){},time);方法，分享给大家供大家参考，具体内容如下
HTML布局:
<ulclass="recommend-info"> <li> <spanclass="push">荐</span> <ahref="javascript:;">1高档社区，经典户型，机会难得，稍纵即逝！仅售66万！</a> <spanclass="htype">66万3室2厅1卫120㎡</span> </li> <li> <spanclass="push">荐</span> <ahref="javascript:;">2高档社区，经典户型，机会难得，稍纵即逝！仅售66万！</a> <spanclass="htype">66万3室2厅1卫120㎡</span> </li> <li> <spanclass="push">荐</span> <ahref="javascript:;">3高档社区，经典户型，机会难得，稍纵即逝！仅售66万！</a> <spanclass="htype">66万3室2厅1卫120㎡</span> </li> <li> <spanclass="push">荐</span> <ahref="javascript:;">4高档社区，经典户型，机会难得，稍纵即逝！仅售66万！</a> <spanclass="htype">66万3室2厅1卫120㎡</span> </li> </ul>
CSS样式：
<style>
.recommend-info{
width:630px;
height:42px;
padding:010px;
margin-top:12px;
margin-bottom:18px;
border:1pxdashed#DFDFDF;
overflow:hidden;
}
.recommend-infoli{
overflow:hidden;
font-size:14px;
line-height:42px;
}
.recommend-infoli.push{
float:left;
display:inline-block;
width:18px;
height:17px;
margin-top:12px;
margin-right:10px;
background:#D95B4E;
font-size:12px;
color:#fff;
text-align:center;
line-height:17px;
}
.recommend-infolia{
float:left;
color:#333;
}
.recommend-infolia:hover{
color:#da5c4f;
}
.recommend-infoli.htype{
float:right;
color:#999;
}
</style>
JS脚本:
<script>
//不断把新的第一个追加到后面
functionvscroll(){
varfrtEle=$('.recommend-infoli:first');
frtEle.animate({'marginTop':-$('.recommend-infoli').height()},500,function(){
frtEle.css('marginTop',0);
$('.recommend-info').append(frtEle);
});
}
varstartInterval=setInterval(vscroll,3000);
//鼠标悬停
$('.recommend-infoli').hover(function(){
clearInterval(startInterval);
},function(){
startInterval=setInterval(vscroll,3000);
});
</script>
以上就是本文的全部内容，谢谢关注！