jq跑马灯效果

Posted 2020-08-26 胡琦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq跑马灯效果相关的知识，希望对你有一定的参考价值。

这几天公司产品有个无缝循环滚动的广告跑马灯要做，最开始想到的是<marquee>标签，但在PC端正常，在安卓广告屏上却怎么都跑不动，后来用的css3的animation，结果也是PC端及其他一些手机正常，但一到安卓广告屏上就跑不动了；后来领导找了个jQuery插件，经测试，完美运行。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动文字jquery插件</title>
    /**
    * author ormin
    * http://www.cnblogs.com/kangaoxiaoshi/p/5431870.html
    * http://www.cnblogs.com/yexiaochai/p/3759959.html
    * http://www.cnblogs.com/axl234/p/5780432.html
    */
    <script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
        (function($) {
            $.fn.extend({
                roll: function(options) {
                    var defaults = {
                        speed:1
                    };
                    var options = $.extend(defaults, options);
                    var speed=(document.all) ? options.speed : Math.max(1,options.speed-1);
                    if ($(this) == null) return ;
                    var $container = $(this);
                    var $content = $("#content");
                    var init_left = $container.width();
                    $content.css({left:parseInt(init_left) + "px"});
                    var This = this;
                    var time = setInterval(function(){This.move($container,$content,speed);},20); //setInterval会改变this指向，即使加了This=this，也要用匿名函数封装，这里调试了n久

                    $container.bind("mouseover",function()
                    {
                        clearInterval(time);
                    });
                    $container.bind("mouseout",function()
                    {
                        time = setInterval(function(){This.move($container,$content,speed);},20);
                    });

                    return this;
                },
                move:function($container,$content,speed){
                    var container_width = $container.width();
                    var content_width = $content.width();
                    if (parseInt($content.css("left")) + content_width > 0)
                    {
                        $content.css({left:parseInt($content.css("left")) - speed + "px"});
                    }
                    else
                    {
                        $content.css({left:parseInt(container_width) + "px"});
                    }
                }
            });
        })(jQuery);
        //插件的调用$("#yourId").roll({speed:#yourSpeed});
        $(document).ready(
                function(){
                    $("#container").roll({speed:8});
                }
        );
    </script>
    <style type="text/css">
        #container{
            background:#CCCCCC;
            position:relative;
            overflow:hidden;  /*这个东西折腾了很久才弄出来*/
            width:550px;
            height:80px;
            line-height:80px;
            margin:100px;
        }

        #content{
            position:absolute;
            left:0;
            top:0;
            white-space:nowrap;   /*重要，不然文字显示效果不好*/
        }
    </style>

</head>

<body>
<div id="container">
    <div id="content" style="color:red;font-size:80px;">This is a roll word test,created by Baidu FE.</div>
</div>
</body>
</html>

　　jQuery部分（使用时先引用jQuery插件）

(function($) {
    $.fn.extend({
        roll: function(options) {
            var defaults = {
                speed:1
            };
            var options = $.extend(defaults, options);
            var speed=(document.all) ? options.speed : Math.max(1,options.speed-1);
            if ($(this) == null) return ;
            var $container = $(this);
            var $content = $("#content");
            var init_left = $container.width();
            $content.css({left:parseInt(init_left) + "px"});
            var This = this;
            var time = setInterval(function(){This.move($container,$content,speed);},20); //setInterval会改变this指向，即使加了This=this，也要用匿名函数封装，这里调试了n久

            $container.bind("mouseover",function()
            {
                clearInterval(time);
            });
            $container.bind("mouseout",function()
            {
                time = setInterval(function(){This.move($container,$content,speed);},20);
            });

            return this;
        },
        move:function($container,$content,speed){
            var container_width = $container.width();
            var content_width = $content.width();
            if (parseInt($content.css("left")) + content_width > 0)
            {
                $content.css({left:parseInt($content.css("left")) - speed + "px"});
            }
            else
            {
                $content.css({left:parseInt(container_width) + "px"});
            }
        }
    });
})(jQuery);

以上是关于jq跑马灯效果的主要内容，如果未能解决你的问题，请参考以下文章