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程序设计有所帮助。