yzc567亚洲城:jq跑马灯效果
分类:ca88手机版

yzc567亚洲城 ,yzc567亚洲城: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://www.bjjkdq.com/uploads/allimg/191130/213600C91-0.jpg"></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);

  

 

本文由亚洲城ca88com手机版发布于ca88手机版,转载请注明出处:yzc567亚洲城:jq跑马灯效果

上一篇:不过会好的,当爱情满足于本分 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • yzc567亚洲城:jq跑马灯效果
    yzc567亚洲城:jq跑马灯效果
    yzc567亚洲城 ,yzc567亚洲城:jq跑马灯效果。  如今公司出品有个无缝循环滚动的广告跑马灯要做,最开头想到的是marquee标签,但在PC端平常,在安卓广告屏
  • 最美的遇见,让爱住在心里
    最美的遇见,让爱住在心里
    星象只不经意的被什么人打破的墨棒槌瓶,云层重重叠叠黑乎乎压下来,未有风,沈子涵意识到自然有场尘暴雨会光顾。 连日,都没见周彩欣的人影,座位
  • 小七的日记,时间不会流逝
    小七的日记,时间不会流逝
                        博士访员团  冯丽华 台式机是小外孙子前些时间在地下室开掘的,到现在本身仍可以记起那天的每贰个细节,包含日记本的样子,满
  • 逗逼又害羞的性知识
    逗逼又害羞的性知识
    腼腆和性是四次事吧 穿越嘈杂的学校,回到嘈杂的班里。 写在近来: “组长,给,作业。” 说真话,看见征文的的率先弹指间想到的正是他,八个天性特
  • 从零开始搭建基于CEFGlue的CB
    从零开始搭建基于CEFGlue的CB
    依赖CEF,用.net包装过的Xilium.CefGlue/3,基于此框架能够很有利在你的winform等C/S项目中搭建一个内建的浏览器 Chromium Embedded Framework (CEF)是个基于谷歌 Chromiu