国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

JS實現的自定義水平滾動字體插件完整實例

2019-11-20 09:40:32
字體:
來源:轉載
供稿:網友

本文實例講述了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;"http://    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程序設計有所幫助。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 思茅市| 五大连池市| 永靖县| 济南市| 广宁县| 宜兰县| 遂宁市| 新绛县| 青龙| 漳平市| 平山县| 长阳| 通海县| 深圳市| 武义县| 邯郸市| 麟游县| 咸丰县| 灵石县| 贺兰县| 南城县| 隆子县| 高邑县| 桃园县| 玉山县| 利辛县| 红安县| 合川市| 苍溪县| 长沙县| 高邮市| 定襄县| 富川| 大埔县| 达尔| 彩票| 丰镇市| 平谷区| 萍乡市| 乐安县| 交城县|