本文实例讲述了JS自定义水平滚动字体插件。分享给大家供大家参考，具体如下：
文字#### ",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 = '
';
//判断是否指明了内容存放的位置
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;
}
'+
'
'+
''+
'
'+
'