文字滚动本身是可以通过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; }