滚动文字jquery插件

作者: LIsPeri | 来源:发表于2019-04-18 14:37 被阅读0次

滚动文字jquery插件
jQuery相关插件
全屏滚动
常用插件
上下滚动条插件
js插件网址
jquery轻量级数字动画插件jquery.countup.js
05_jQuery_无缝滚动轮播效果插件封装
微风香水收集工作中常用的 jquery插件,持续更新
17_day 整屏幕滚动

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动文字jquery插件</title>
<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});
        setInterval(function(){
            $('#content').append('<a href="#">999999</a>');
        },4000)
        
    });
</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;   /*重要，不然文字显示效果不好*/
    }
    #content a{
        padding: 0 10px;
    }
</style>

</head>