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>
以上就是本文的全部内容,谢谢关注!