文字滚动本身是可以通过html的<marquee>标签来实现的,但是滚动方式不够灵活,有时候无法满足需求。于是自己动手写了个jQuery插件,本身没什么难度,非常简单。
$.fn.extend({
scrollTxt:function(speed){
var parentObj = this.parent();
var _this = this;
clearInterval(this.timer);
if(this.width()> parentObj.width()){
this.timer = setInterval(function(){
var left = _this.css("left");
left = left.replace(new RegExp('px'), "");
if(-left < _this.width()){
var nowLeft = _this.css("left");
nowLeft = nowLeft.replace(new RegExp('px'), "");
_this.css("left",--nowLeft);
}else{
_this.css("left",(parentObj.width()));
}
},speed?speed:30);
}
}
})
HTML部分
<div id="scrollTxt">
<p>要滚动的文字</p>
</div>
然后执行$("#scrollTxt p").scrollTxt();就可以实现文字滚动效果了
如果无法实现,可能是CSS样式的问题:
#scrollTxt{
width: 800px;
overflow: hidden;
}
#scrollTxt p{
display: inline-block;
white-space: nowrap;
position: relative;
left: 0;
}