您的位置:9159金沙官网 > www.9159.com > jq跑马灯效果

jq跑马灯效果

发布时间:2019-11-28 06:03编辑:www.9159.com浏览(183)

    jq跑马灯效果。jq跑马灯效果。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);
    

      

     

    本文由9159金沙官网发布于www.9159.com,转载请注明出处:jq跑马灯效果

    关键词: