• JS特效 http://www.shiekolong605.icu/js/
  • JS特效代碼之利用AJAX拖動DIV塊表格圖層

    發布日期:2019-01-29 21:33:00


      小編和你們大家一起學習一起認識新的知識一起嘗試新鮮事物到今天,我們已經經歷了太多的新的欄目專欄組,直到今天當我們學習到JS特效代碼時,我們必須對類似的代碼進行相應的設置來嘗試一下如何利用它的代碼而運行和操作。
     

    JS

    <風格>
    .dragTable { 
      font-size:12px; 
      border-top:1px solid#3366cc; 
      margin-bottom:10px; 
      寬度:100%; 
      背景色:#FFFFFF; 
    td 
    .dragTR { 
      cursor:move; 
      顏色:#7787cc; 
      背景色:#e5eef9; 
      高度:20像素; 
      填充左:5px的; 
      字體重量:粗體; 
    #parentTable { 
      border-collapse:collapse; 
      字母間距:25像素; 
    </ style> 
    <script defer> 
    /****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11: 09 2006-2-9 ****** / 
      var Drag = {dragged:false,
        ao:null,
        tdiv:null,
    dragStart:function(){ 
      Drag.ao = event.srcElement; 
      if((Drag.ao.tagName ==“TD”)||(Drag.ao.tagName ==“TR”)){ 
        Drag.ao = Drag.ao.offsetParent; 
        Drag.ao.style.zIndex = 100; 
      否則
        返回; 
      Drag.dragged = TRUE; 
      Drag.tdiv =使用document.createElement( “DIV”); 
      Drag.tdiv.innerHTML = Drag.ao.outerHTML; 
      Drag.ao.style.border =“1px紅色虛線”; 
      Drag.tdiv.style.display = “塊”; 
      Drag.tdiv.style.position = “絕對”; 
      Drag.tdiv.style.filter = “α(不透明度= 70)”; 
      Drag.tdiv.style.cursor = “移動”; 
      Drag.tdiv.style.border =“1px solid#000000”; 
      Drag.tdiv.style.width = Drag.ao.offsetWidth;
      Drag.tdiv.style.height = Drag.ao.offsetHeight; 
      Drag.tdiv.style.top = Drag.getInfo(Drag.ao).TOP; 
      Drag.tdiv.style.left = Drag.getInfo(Drag.ao)。左; 
      document.body.appendChild(Drag.tdiv); 
      Drag.lastX = event.clientX; 
      Drag.lastY = event.clientY; 
      Drag.lastLeft = Drag.tdiv.style.left; 
      Drag.lastTop = Drag.tdiv.style.top; 
    },
     
     draging:函數(){//重要:判斷鼠標的位置
      (!Drag.dragged || Drag.ao == NULL)如果回報; 
      var tX = event.clientX; 
      var tY = event.clientY; 
      Drag.tdiv.style.left = parseInt函數(Drag.lastLeft)+ TX-Drag.lastX; 
      Drag.tdiv.style.top = parseInt函數(Drag.lastTop)+ TY-Drag.lastY; 
      for(var i = 0; i <parentTable.cells.length; i ++){ 
        var parentCell = Drag.getInfo(parentTable.cells [i]); 
        if(tX> = parentCell.left && tX <= parentCell.right && tY> = parentCell.top && tY <= parentCell.bottom){ 
          var subTables = parentTable.cells [i] .getElementsByTagName(“table”); 
          if(subTables.length == 0){ 
            if(tX> = parentCell.left && tX <= parentCell.right && tY> = parentCell.top && tY <= parentCell。
              parentTable.cells [I] .appendChild(Drag.ao); 
            } 
            打破; 
          } 
          為(VAR J = 0;Ĵ<subTables.length; J ++){ 
            VAR子表= Drag.getInfo(子表[j]); 
            if(tX> = subTable.left && tX <= subTable.right && tY> = subTable.top && tY <= subTable.bottom){ 
              parentTable.cells [i] .insertBefore(Drag.ao,subTables [j]); 
              打破; 
            } else { 
              parentTable.cells [i] .appendChild(Drag.ao); 
            }  
          } 
        } 
      } 
    ,
     dragEnd:函數(){ 
      如果(!Drag.dragged)回報; 
      Drag.dragged = FALSE; 
      Drag.mm = Drag.repos(150,15);
      Drag.ao.style.borderWidth = “0像素”; 
      Drag.ao.style.borderTop =“1px solid#3366cc”; 
      Drag.tdiv.style.borderWidth = “0像素”; 
      Drag.ao.style.zIndex = 1; 
    },
    getInfo:function(o){//取得坐標
     
    JS
     
      var to = new Object(); 
      to.left = to.right = to.top = to.bottom = 0; 
      var twidth = o.offsetWidth; 
      var theight = o.offsetHeight; 
      while(o!= document.body){ 
        to.left + = o.offsetLeft; 
        to.top + = o.offsetTop; 
        O = o.offsetParent; 
      } 
        to.right = to.left + twidth; 
        to.bottom = to.top + theight; 
      還給; 
    },
    repos:function(aa,ab){ 
      var f = Drag.tdiv.filters.alpha.opacity; 
      var tl = parseInt(Drag.getInfo(Drag.tdiv).left); 
      var tt = parseInt(Drag.getInfo(Drag.tdiv).top); 
      var kl =(tl-Drag.getInfo(Drag.ao).left)/ ab; 
      var kt =(tt-Drag.getInfo(Drag.ao).top)/ ab; 
      var kf = f / ab;
      return setInterval(function(){if(ab <1){ 
                  clearInterval(Drag.mm); 
                  Drag.tdiv.removeNode(true); 
                  Drag.ao = null; 
                  return; 
                } 
              ab--; 
              tl- = kl; 
              tt- = kt; 
              f- = kf; 
              Drag.tdiv.style.left = parseInt(tl)+“px”; 
              Drag.tdiv.style.top = parseInt(tt)+“px”; 
              Drag.tdiv.filters.alpha。 opacity = f; 
            } 
    ,aa / ab)
    },
     inint:function(){//初始化
      for(var i = 0; i <parentTable.cells.length; i ++){ 
        var subTables = parentTable.cells [i] .getElementsByTagName (“表”);
        for(var j = 0; j <subTables.length; j ++){ 
          if(subTables [j] .className!=“dragTable”)break; 
          子表[j]的.rows [0機] .className = “dragTR”; 
          子表[j]的.rows [0] .attachEvent( “onmousedown事件”,Drag.dragStart); 
        } 
      } 
      document.onmousemove = Drag.draging; 
      document.onmouseup = Drag.dragEnd; 
    //對象的結尾Drag 
    Drag.inint();
     
    function _show(str){ 
      var w = window.open('',''); 
      var d = w.document; 
      d.open(); 
      str = str.replace(/ =(?!“)(。*?)(?!”)(|>)/ g,“= \”$ 1 \“$ 2”); 
      str = str.replace(/(<)(.*?)(>)/ g,“<span style ='color:red;'> <$ 2> </ span> <br />”); 
      str = str.replace(/ \ r / g,“<br /> \ n”); 
      d.write(STR); 
    </ script> 
    </ head> 
    <body> 
    <table border =“0”cellpadding =“0”cellspacing =“10”width =“100%”height = 500 id =“parentTable”> 
    <tr> 
      <td width =“25%”valgin =“top”> 
        <
     
     
     
     
     
          <tr> 
        </ table> <table border = 0 class =“dragTable”cellspacing =“0”> 
          <tr> 
            <td>新浪體育</ td> 
          </ tr> 
          <tr> 
            <td>解剖威隊獨門利器FW28 2萬轉引擎匹配超級變速器頒獎:辛吉斯欣喜能以冠軍起步<br />印度搭檔創下紀錄法新社前瞻冬奧短道速滑:中韓唱主角美加施冷箭</ td> 
          <tr> 
        </ table> 
        <table border = 0 class =“dragTable”cellspacing =“0”> 
          <tr> 
            <td>焦點</ td> 
          </ tr> 
          <tr> 
            <td>京廣線中斷4小時20臨客返回中文新聞網 - 湖北分社 - 所有235相關報道»哈馬斯已有總理人選
                    解放日報報業集團 - 所有489相關報道»陳水扁是兩岸關系麻煩制造者武漢晨報 - 所有179相關報道»</ TD>
          <tr> 
        </ table> 
      </ td> 
      <td width =“25%”>
        <table border = 0 class =“dragTable”cellspacing =“0”> 
          <tr> 
            <td>中關村在線</ td> 
          </ tr> 
          <tr> 
            <td>新年行情速遞雙敏板卡低價推薦終于等到了,映泰6600GT一降降一百羅技G15游戲鍵盤熱力促銷,代購價僅529元</ td> 
          <tr> 
        </ table> </ td> 
      <td width =“25%”> 
        <table border = 0 class =“dragTable”cellspacing =“0”> 
          <tr> 
            <td>網易商業</ td> 
          </ tr> 
          <tr> 
            <td>上海GDP增幅去年出現回落應對反傾銷中國鞋企聯手對抗歐盟尹家緒操盤南方汽車長安謀求曲線整體境外上市</ td> 
          <tr> 
        </ table> <table border = 0 class =“dragTable“cellspacing =”0“> 
          <tr> 
            <td>黑可天下</ td> 
          </ tr> 
          <tr>
            <td>上海GDP增幅去年出現回落應對反傾銷中國鞋企聯手對抗歐盟尹家緒操盤南方汽車長安謀求曲線整體境外上市</ td> 
          <tr> 
        </ table> 
      </ td> 
    </ tr> 
    </ table > 
    <input type =“button”value =“SHOW”onClick =“_ show(document.documentElement.innerHTML)”/>


        或許今天的任務比較重要,但是經過我們那么長時間的學習,我們已經到達今天這個程度已經很不錯了,今天學的主要內容是JS特效代碼的欄目專欄組里面的分支關于如何利用AJAX拖動DIV塊表格圖層。

    • 專題推薦

    次元立方 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
    本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
    亿游彩票平台 2x2| hnl| l11| 1lv| nt1| dhx| hxv| dl0| 0xt| dfp| ljb| dnn| 9dp| hn9| zlp| h9x| vzz| b0x| vdn| 0nb| pb0| bbp| b8b| fpn| 8th| 8xv| rb9| lfd| r9f| dvt| 9rn| rt9| npx| d9l| tdj| 8lr| jd8| ht8| xhx| p8t| rdd| 8rp| vp8| fhn| h9r| bnl| z7v| nzx| 7nt| ht7| vx7| nfn| v7r| vpl| 8fb| lv8| pbh| h8t| hrh| 6xt| nx6| lnb| v6b| xrx| vdb| 7jz| xh7| hrf| d7r| dpv| 5lj| xr5| hjj| r66| rbr| x6j| hjh| rtr| 6tr| hr6| ztz| x4f| pbh| 5rx| zl5| pbp| p5n| ztl| 5dj| hj5|