js模拟marquee的滚动效果

一些场景下我们需要用到marquee标签制作滚动效果，但是marquee不是标准标签，在浏览器中使用会出现各种兼容性问题。我今天的任务就是要做一个滚动的提示，但是使用marquee的时候在firefox和ie下会出问题，只能自己用js模拟了╮(╯_╰)╭！看代码

这是js代码
　　　　 scroll($('#warnMsg'));
        function scroll(doc){
            var parentWidth = doc.parent('div').width();
            var docWidth = doc.width();
            doc.css('left',parentWidth+'px');
            var timer = setInterval(function(){
                if(parseInt(doc.css('left'))>-docWidth){
                    doc.css('left',(parseInt(doc.css('left'))-1)+"px");
                }else{
                    doc.css('left',parentWidth+'px');
                }
            },10);
            doc.on('mouseover',function(){
                clearInterval(timer);
            });
            doc.on('mouseout',function(){
                timer = setInterval(function(){
                    if(parseInt(doc.css('left'))>-docWidth){
                        doc.css('left',(parseInt(doc.css('left'))-1)+"px");
                    }else{
                        doc.css('left',parentWidth+'px');
                    }
                },10);
            });
        }
这是html：
<div style="position: absolute;top:27px;left:500px;z-index:777;overflow: hidden;width:500px;" >
    <div style="position: relative;left:500px;white-space: nowrap;width:auto; display:inline-block !important; display:inline;" id="warnMsg">
        滚动内容
    </div>
</div>

当然，我的使用场景不一定和大家的使用场景相同，不过还是有借鉴价值的！