js 特效 html 特效 鼠标放入容器内滚动字体上下滚动,js实现文字垂直滚动和鼠标悬停效果...

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

HTML布局:

CSS样式：

.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;

}

JS脚本:

// 不断把新的第一个追加到后面

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);

});

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

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！