JS实现的自定义水平滚动字体插件完整实例

<script type="text/javascript">  $(function(){    var setting = {      content : "  @@@@@浮动文字####  ",      overStop : true,      width:"100px",      targetId:"huangbiao",      //显示之后的回调函数      onAfterShow : function(obj){        obj.setting.width = "20px";//        alert("dddd");        //修改配置文件之后重新设置//        obj.init();        //删除动态添加的内容//        obj.remove();      }    };    var ooo = new fontMove(setting);    //重新设置//    ooo.setting.width = "20px;"//    ooo.init();  });  /*  原理说明：  1、top父div 是隐藏滚动条的  2、二级DIV(top 父div 的子 div )宽度是 8000%  3、三级子div有两个，分别是div1（最左边） 和 div2（第二个左边） 且节点内容完全一样，分别都是向left浮动  4、设置一个定时器，top div的滚动条向左滚动1px  5、一旦top div滚动条的长度 大于或者等于 div2的滚动条的距离，就让top div的滚动条的距离为0   */  function fontMove(userSettingObj){    var that = this;    //用时间戳作为id值    var timestamp = new Date().getTime();    this.setting = {      //滚动的文字内容      content : "浮动文字",      //滚动条显示的宽度      width:"200px",      //每30毫秒执行一次      speed : 30,      //鼠标悬浮是否停止，true是，false为不停，默认是true      overStop : true,      //滚动条的ID值      objId : timestamp,      //将空间存放的目标位置，如果为""，则默认是放在body标签的最后面      targetId : "",      onAfterShow:function(){      }    };    //得到用户的配置文件    this.setting = $.extend(this.setting,userSettingObj);    //检查配置文件的参数    this.checkParam = function(){    }    //扩展插件    this.callback = function(myfun){      if(typeof myfun == "function"){        //this 代表callback ，因此需要使用 parent        myfun.call(that);      }    }    this.remove = function(){      $("#"+that.setting.objId).remove();    }    this.init = function(){      //所有想获取配置文件的方法是使用that.setting      var domStr = '<div id="' + that.setting.objId + '" style="overflow:hidden;width:'+that.setting.width+'">'+       '<div style="width:8000%;">'+         '<div id="' + that.setting.objId + '_div1" style="float:left;">'+that.setting.content+         '</div>'+         '<div id="' + that.setting.objId + '_div2" style="float:left;">'+that.setting.content+'</div>'+         '</div>'+       '</div>'+     '</div>';      //判断是否指明了内容存放的位置      if(""==that.setting.targetId){        $("body").append(domStr);      }else{        $("#"+that.setting.targetId).html(domStr);      }      //内容容器div      var thatDiv = document.getElementById(that.setting.objId);      //左边第一个子div      var sonDiv1 = document.getElementById(that.setting.objId + '_div1');      //左边第二个子div      var sonDiv2 = document.getElementById(that.setting.objId + '_div2');      this.Marquee = function(){        //利用定时器改变值//        console.log("thatDiv.scrollLeft : " + thatDiv.scrollLeft);//        //sonDiv1.offsetWidth 值固定不变//        console.log("sonDiv1.offsetWidth : " + sonDiv1.offsetWidth);//        //值永远为0,因为它没有滚动条//        console.log("sonDiv1.scrollLeft : " + sonDiv1.scrollLeft);//        //sonDiv2.offsetWidth 值固定不变//        console.log("sonDiv2.offsetWidth : " + sonDiv2.offsetWidth);//        //值永远为0，因为它没有滚动条//        console.log("sonDiv2.scrollLeft : " + sonDiv2.scrollLeft);        //top div滚动条的距离 是否 大于 第一个子div的水平距离,即是否大于内容的实际距离        if(thatDiv.scrollLeft - sonDiv1.offsetWidth >= 0){          //滚动条的长度重新清0，相当于又是从第一个div显示，然后向左滚动          thatDiv.scrollLeft = thatDiv.scrollLeft - sonDiv1.offsetWidth;        }        else{          thatDiv.scrollLeft++;        }      }      var myvar=setInterval(that.Marquee,that.setting.speed);      //鼠标悬浮，是否停止运动      if(that.setting.overStop){        thatDiv.onmouseover=function(){clearInterval(myvar);}        thatDiv.onmouseout=function (){myvar=setInterval(Marquee,30);}      }      if(typeof that.setting.onAfterShow == "function"){        that.setting.onAfterShow.call(that,that);      }    }    //完成初始化    this.init();    //返回方法本身，这样可以获取所有配置this的参数    return this;  }</script>