这几天公司产品有个无缝循环滚动的广告跑马灯要做，最开始想到的是<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跑马灯效果的更多相关文章

  1. TextView跑马灯效果

    转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...

  2. Android_TextView之跑马灯效果

    对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...

  3. android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习

    跑马灯效果 1.用过属性的方式实现跑马灯效果 属性:                  android:singleLine="true" 这个属性是设置TextView文本中文字 ...

  4. Android 实现多行文本跑马灯效果

    Android TextView 实现跑马灯的效果很简单,只要加三个属性就可以了. android:ellipsize="marquee" android:focusable=&q ...

  5. android:ellipsize实现跑马灯效果总结（转）

      最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...

  6. flex 简单跑马灯效果（竖着显示）

    <mx:Move id="move_area" target="{VBox_AreaWarning}"/> //move效果,模拟跑马灯 <s ...

  7. Dom操作--跑马灯效果

    这里给园友们演示的是Dom操作实现跑马灯效果,相信我们很多人都用Winform实现过跑马灯效果,其中的关键就是Tirm控件,那么在Dom操作中是用setInterval方法来实现隔一段时间执行一段代码 ...

  8. [Android1.5]TextView跑马灯效果

    from: http://www.cnblogs.com/over140/archive/2010/08/20/1804770.html 前言 这个效果在两周前搜索过,网上倒是有转载,可恨的是转载之后 ...

  9. Android学习总结——TextView跑马灯效果

    Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须 ...

随机推荐

  1. 学点HTTP知识

    不学无术 又一次感觉到不学无术,被人一问Http知识尽然一点也没答上来,丢人丢到家了啊.平时也看许多的技术文章,为什么到了关键时刻就答不上来呢? 确实发现一个问题,光看是没有用的,需要实践.看别人说的 ...

  2. 通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流程[下]：管道是如何构建起来的？

    在<中篇>中,我们对管道的构成以及它对请求的处理流程进行了详细介绍,接下来我们需要了解的是这样一个管道是如何被构建起来的.总的来说,管道由一个服务器和一个HttpApplication构成 ...

  3. 如何快速优化手游性能问题？从UGUI优化说起

    WeTest 导读   本文作者从自身多年的Unity项目UI开发及优化的经验出发,从UGUI,CPU,GPU以及unity特有资源等几个维度,介绍了unity手游性能优化的一些方法.   在之前的文 ...

  4. 8、Struts2 运行流程分析

    1.流程分析: 请求发送给 StrutsPrepareAndExecuteFilter StrutsPrepareAndExecuteFilter 询问 ActionMapper: 该请求是否是一个 ...

  5. Discuz论坛黑链清理教程

    本人亲测有效,原创文章哦~~~ 论坛黑链非常的麻烦,如果你的论坛有黑链,那么对不起,百度收录了你的黑链,不会自动删除,需要你手动去清理. 什么是黑链 黑链,顾名思义,就是一些赌博网站的外链,这些黑链相 ...

  6. 【踩坑速记】二次依赖？android studio编译运行各种踩坑解决方案，杜绝弯路，总有你想要的~

    这篇博客,只是把自己在开发中经常遇到的打包编译问题以及解决方案给大家稍微分享一下,不求吸睛,但求有用. 1.大家都知道我们常常会遇到dex超出方法数的问题,所以很多人都会采用android.suppo ...

  7. 深入Java虚拟机--判断对象存活状态

    程序计数器,虚拟机栈和本地方法栈 首先我们先来看下垃圾回收中不会管理到的内存区域,在Java虚拟机的运行时数据区我们可以看到,程序计数器,虚拟机栈,本地方法栈这三个地方是比较特别的.这个三个部分的特点 ...

  8. C#使用GET、POST请求获取结果

    C#使用GET.POST请求获取结果,这里以一个简单的用户登陆为例. 1. 使用GET请求获取结果 1.1 创建LoginHandler.aspx处理页面 protected void Page_Lo ...

  9. 【JQ基础】DOM操作

    内部插入:append() //向每个匹配的元素内部追加内容,可包含 HTML 标签 $(selector).append(function(index,html)) /*•index - 可选.接收 ...

  10. 开源 iOS 项目分类索引大全 － 待整理

    开源 iOS 项目分类索引大全 GitHub 上大概600个开源 iOS 项目的分类和介绍,对于你挑选和使用开源项目应该有帮助 系统基础库 Category/Util sstoolkit 一套Cate ...