• JS特效 http://www.hxgoods.com/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块表格图层。

    • 专题推荐

    次元立方 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
    本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规
    秒速赛车为什么赢不了 秒速飞艇能赢钱吗 甘肃快3玩法介绍 贵州快3有规律吗 玩贵州快3有什么技巧 秒速赛车是正规的吗 贵州快3官网 怎样玩吉林快3赚钱攻略 玩秒速时时彩怎样玩才有赚钱 秒速赛车怎么样充值