js实现文字垂直滚动和鼠标悬停效果

本文实例介绍了文字垂直滚动效果，主要运用了setInterval（function（）{}, time）;方法，分享给大家供大家参考，具体内容如下
HTML布局:

<ul class="recommend-info"><li><span class="push">荐</span><a href="javascript:;">1高档社区，经典户型，机会难得，稍纵即逝！仅售66万！</a><span class="htype">66万3室2厅1卫 120㎡</span></li><li><span class="push">荐</span><a href="javascript:;">2高档社区，经典户型，机会难得，稍纵即逝！仅售66万！</a><span class="htype">66万3室2厅1卫 120㎡</span></li><li><span class="push">荐</span><a href="javascript:;">3高档社区，经典户型，机会难得，稍纵即逝！仅售66万！</a><span class="htype">66万3室2厅1卫 120㎡</span></li><li><span class="push">荐</span><a href="javascript:;">4高档社区，经典户型，机会难得，稍纵即逝！仅售66万！</a><span class="htype">66万3室2厅1卫 120㎡</span></li></ul>

CSS样式：

<style>.recommend-info {width: 630px;height: 42px;padding: 0 10px;margin-top: 12px;margin-bottom: 18px;border: 1px dashed #DFDFDF;overflow: hidden;}.recommend-info li {overflow: hidden;font-size: 14px;line-height: 42px;}.recommend-info li .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-info li a {float: left;color: #333;}.recommend-info li a:hover {color: #da5c4f;}.recommend-info li .htype {float: right;color: #999;}</style>

JS脚本:

<script>// 不断把新的第一个追加到后面 function vscroll（） {var frtEle = $（".recommend-info li:first"）;frtEle.animate（{"marginTop": -$（".recommend-info li"）.height（）}, 500, function（）{frtEle.css（"marginTop", 0）;$（".recommend-info"）.append（frtEle）;}）;}var startInterval = setInterval（vscroll, 3000）;// 鼠标悬停 $（".recommend-info li"）.hover（function（）{clearInterval（startInterval）;}, function（）{startInterval = setInterval（vscroll, 3000）;}）;</script>

以上就是本文的全部内容，谢谢关注！