jq跑馬燈效果

時間 2019-11-11

原文原文鏈接

這幾天公司產品有個無縫循環滾動的廣告跑馬燈要作，最開始想到的是<marquee>標籤，但在PC端正常，在安卓廣告屏上卻怎麼都跑不動，後來用的css3的animation，結果也是PC端及其餘一些手機正常，但一到安卓廣告屏上就跑不動了；後來領導找了個jQuery插件，經測試，完美運行。javascript

<!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插件）css

(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);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。