JS实现的自定义水平滚动字体插件完整实例
本文实例讲述了JS自定义水平滚动字体插件。分享给大家供大家参考，具体如下：
<scripttype="text/javascript">
$(function(){
varsetting={
content:"@@@@@浮动文字####",
overStop:true,
width:"100px",
targetId:"huangbiao",
//显示之后的回调函数
onAfterShow:function(obj){
obj.setting.width="20px";
//alert("dddd");
//修改配置文件之后重新设置
//obj.init();
//删除动态添加的内容
//obj.remove();
}
};
varooo=newfontMove(setting);
//重新设置
//ooo.setting.width="20px;"
//ooo.init();
});
/*
原理说明：
1、top父div是隐藏滚动条的
2、二级DIV(top父div的子div)宽度是8000%
3、三级子div有两个，分别是div1（最左边）和div2（第二个左边）且节点内容完全一样，分别都是向left浮动
4、设置一个定时器，topdiv的滚动条向左滚动1px
5、一旦topdiv滚动条的长度大于或者等于div2的滚动条的距离，就让topdiv的滚动条的距离为0
*/
functionfontMove(userSettingObj){
varthat=this;
//用时间戳作为id值
vartimestamp=newDate().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(typeofmyfun=="function"){
//this代表callback，因此需要使用parent
myfun.call(that);
}
}
this.remove=function(){
$("#"+that.setting.objId).remove();
}
this.init=function(){
//所有想获取配置文件的方法是使用that.setting
vardomStr='<divid="'+that.setting.objId+'"style="overflow:hidden;width:'+that.setting.width+'">'+
'<divstyle="width:8000%;">'+
'<divid="'+that.setting.objId+'_div1"style="float:left;">'+that.setting.content+
'</div>'+
'<divid="'+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
varthatDiv=document.getElementById(that.setting.objId);
//左边第一个子div
varsonDiv1=document.getElementById(that.setting.objId+'_div1');
//左边第二个子div
varsonDiv2=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);
//topdiv滚动条的距离是否大于第一个子div的水平距离,即是否大于内容的实际距离
if(thatDiv.scrollLeft-sonDiv1.offsetWidth>=0){
//滚动条的长度重新清0，相当于又是从第一个div显示，然后向左滚动
thatDiv.scrollLeft=thatDiv.scrollLeft-sonDiv1.offsetWidth;
}
else{
thatDiv.scrollLeft++;
}
}
varmyvar=setInterval(that.Marquee,that.setting.speed);
//鼠标悬浮，是否停止运动
if(that.setting.overStop){
thatDiv.onmouseover=function(){clearInterval(myvar);}
thatDiv.onmouseout=function(){myvar=setInterval(Marquee,30);}
}
if(typeofthat.setting.onAfterShow=="function"){
that.setting.onAfterShow.call(that,that);
}
}
//完成初始化
this.init();
//返回方法本身，这样可以获取所有配置this的参数
returnthis;
}
</script>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。