js模拟marquee的滚动效果

最新推荐文章于 2023-08-03 16:48:12 发布

转载最新推荐文章于 2023-08-03 16:48:12 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mjfmei/p/5089493.html

本文介绍了一种通过JavaScript代码实现marquee标签功能的方法，以解决不同浏览器的兼容性问题。提供了HTML和JS代码示例，适用于特定场景需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一些场景下我们需要用到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>