本文實例講述了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>
更多關於JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。