DIV CSS 佈局教程網

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