兼容ie ff div 层打开+关闭+ 拖动+遮罩+移动+动画改变高宽分享-计算机技术网

1 拖动+遮罩+移动+改变元素大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="https://www.w3.org/1999/xhtml">  <head>       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>popper.w’s code</title>       </p>
<style type="text/css">      body{text-align:center}      #dd{ margin:50px auto}      #odiv{ width:400px; height:200px;border:1px dotted red; border:1px dashed green;}      #odiv ul{ list-style:none; text-align:left; width:150px; font-size:11px;}      #odiv ul li{height:25px; line-height:25px; border-bottom:1px dashed green;}      #ho{ width:150px; height:150px; border:1px dotted red}       </style>
<p>  <script type="text/javascript" >  function $ (o) {        return document.getElementById(o);  }  function XCreateElement(tagName,tagParent,attrs)  {      if(tagName&&arguments.length<2){tagParent=document.body;}          var oTemp=document.createElement(tagName);          if(attrs&&attrs.constructor==Object)          {          for(var o in attrs)              {                  oTemp.setAttribute(o,attrs[o]);              }                        }          tagParent.appendChild(oTemp);          return oTemp;  }  function XSetCss(obj,cssArgs){      if(arguments.length==2)      {       if(cssArgs.constructor==Object){      for(var o in cssArgs)              {                  if(obj.style[o]!="undefiend")                  {                  obj.style[o]=cssArgs[o];                              }                       }           }      if(cssArgs.constructor==Array&&cssArgs.length==2){                  obj.style[cssArgs[0]]=cssArgs[1];                        }      }  }  function XslideUp(obj,type,mX,num) {              if(!type){return;}              try{                  XSetCss(obj,[type,XgetOffset(obj)[type]-num+"px"]);                  $("aa").innerHTML=XgetOffset(obj)[type];              if(XgetOffset(obj)[type]>mX){                          setTimeout(function(){XslideUp(obj,type,mX,num);},1);                          }              else{                  XSetCss(obj,[type,mX])              }              }              catch(e){}          }  function XslideDown(obj,type,mX,num) {              if(!type){return;}              try{                  XSetCss(obj,[type,XgetOffset(obj)[type]+num+"px"]);                  $("aa").innerHTML=XgetOffset(obj)[type];              if(XgetOffset(obj)[type]<mX){                          setTimeout(function(){XslideDown(obj,type,mX,num);},1);                          }              else{                  XSetCss(obj,[type,mX])              }              }              catch(e){}          }  function XgetOffset (obj) {          return {height:obj.offsetHeight,width:obj.offsetWidth}  }  /*移动函数*/  /*o:element   l: left t:top*/  function Xmove(o,l,t){  o.style.position="absolute";  var a=1;  var ol=parseInt(o.offsetLeft);  var ot=parseInt(o.offsetTop);  var iTimer=setInterval(function(){     if(a==10)      {          Xtransp(o,"end");          clearInterval(iTimer);      }     o.style.left=ol+a*(l-ol)/10+"px";     o.style.top=ot+a*(t-ot)/10+"px";     a++;  },20);  }  /* 取消事件冒泡*/  function XcancleBubble(e)  {  var e = window.event || e;  if (e.preventDefault) e.preventDefault();  else e.returnValue = false;  }  /*设置透明度函数 o: dom 节点 mode: start:设置 开始   end 设置结束 , num: 透明度 1-100 内 整数*/  function Xtransp(o,mode,num){             if(mode=="start"){                          if(document.all){                  o.style.filter = "Alpha(Opacity="+num+")";              }else{                  o.style.opacity = num/100;              }              }          else {              if(document.all){                  o.style.filter = "Alpha(Opacity=100)";              }else{                  o.style.opacity = 1;              }                              }  }  function Xvisible(obj,start,end,step,interval,callback)          {              var st = start > end;              //步进start              st ? start-=step : start+=step;                  //当start和end的关系发生变化时停止运行              if((start<end ^ st)){                  try                  {                      obj.style.filter="alpha(opacity="+start+")";//IE                      obj.style.MozOpacity=start/100;//FF                  }                  catch(e){};                  setTimeout(function(){visible(obj,start,end,step,interval,callback);},interval);                              }              //执行回调                      else                          callback ? callback() : "";          }  var XgetScroll=function(){      return{height:document.documentElement.scrollHeight,top:document.documentElement.scrollTop};  };  function getOffset(evt)  {  var target = evt.target;  if (target.offsetLeft == undefined)  {      target = target.parentNode;  }  var pageCoord = getPageCoord(target);  var eventCoord =  {      x: window.pageXOffset + evt.clientX,      y: window.pageYOffset + evt.clientY  };  var offset =  {      offsetX: eventCoord.x - pageCoord.x,      offsetY: eventCoord.y - pageCoord.y  };  return offset;  }  function getPageCoord(element)  {  var coord = {x: 0, y: 0};  while (element)  {      coord.x += element.offsetLeft;      coord.y += element.offsetTop;      element = element.offsetParent;  }  return coord;  }  function getEventOffset(evt)  {  var msg = "";  if (evt.offsetX == undefined)  {      var evtOffsets = getOffset(evt);      msg={offsetX:evtOffsets.offsetX,offsetY:evtOffsets.offsetY};  }  else  {      msg={offsetX:evt.offsetX,offsetY:evt.offsetY};  }  return msg;  }  function fDragStart(XEle)  {      switch(fCkBrs())      {          case 3:              window.getSelection().removeAllRanges();              break;                                default:              XEle.setCapture();              break;      }  }  function fDragEnd(XEle)  {      switch(fCkBrs())      {          case 3:              window.getSelection().removeAllRanges();              break;                                default:              XEle.releaseCapture();              break;      }  }  function fCkBrs()  {  switch (navigator.appName)  {  case 'Opera': return 2;  case 'Netscape': return 3;  default: return 1;  }  }   function getOffsete (e,o) {      var e=e||window.event;      var eSrc=e.srcElement||e.target;      if(eSrc!=o){getOffsete(e.offsetParent)}  }  var DragZindexNumber=10;  function Xdrag(obj,odrag){  var ex,xy,tag=0;  var odrag=odrag?odrag:obj  odrag.style.cursor="move";  if(tag==0){  odrag.onmousedown=function(e)      {             obj.style.zIndex=DragZindexNumber++;          Xtransp(obj,"start")          tag=1;          var e = e||window.event;          ex=e.clientX-obj.offsetLeft;          ey=e.clientY-obj.offsetTop;          var tempDiv=XCreateElement("div");          XSetCss(tempDiv,{width:obj.offsetWidth+"px",                          height:obj.offsetHeight+"px",                          border:"1px dotted red",                          position:"absolute",                          left:obj.offsetLeft+"px",                          top:obj.offsetTop+"px",                          zIndex:999              });          this.ele=tempDiv;          fDragStart(tempDiv);          document.body.onmousemove=function(e){          if(tag==1)          {               var e=e||window.event;              XSetCss(tempDiv,{left:e.clientX-ex+"px",top:e.clientY-ey+"px"})          }          else{if(!tempDiv==null)tempDiv.parentNode.removeChild(tempDiv)}          }         tempDiv.onmouseup=function(e)          {          var e=e||window.event;          fDragEnd(tempDiv);          obj.style.position="absolute";          Xtransp(obj,"end");          Xmove(obj,tempDiv.offsetLeft,tempDiv.offsetTop);          tempDiv.parentNode.removeChild(tempDiv);          tag=0;          }      }  }  }  function Xcover(color,num){/*color:遮罩的背景色 eg: red/#cbcbcb, num:1-100内的整数*/      var cDiv={};      this.color=color;      this.num=num;      this.start=function(){          cDiv=XCreateElement("div");          XSetCss(cDiv,                  {                      position:"absolute",                      top:"0px",                      left:"0px",                      zIndex:2,                      width:"0px",                      margin:"0px auto",                      background:this.color,                      filter:"Alpha(Opacity="+this.num+")",                      opacity:this.num/100                  })          cDiv.innerText="<h3>双击关闭</h3><p>";          XslideDown(cDiv,"width",getCover().X-25,50);          XslideDown(cDiv,"height",getCover().H,30);          cDiv.ondblclick=function(){              cDiv.parentNode.removeChild(cDiv);              }          };      this.stop=function(){              cDiv.parentNode.removeChild(cDiv);      };  }  function getCover(){      var m={}       m.H=screen.availHeight>document.documentElement.scrollHeight?screen.availHeight:document.documentElement.scrollHeight;       m.X=screen.availwidth>document.documentElement.scrollWidth?screen.availWidth:document.documentElement.scrollWidth;      return m;  }  </script>  </head>  <body>            </p>
<div></div>
<div>
<h1>Just a Test</h1>
<p>          <input type="button" value="XslideUp-H" />          <input type="button" value="XslideDown-H" />          <input type="button" value="XslideUp-W" />          <input type="button" value="XslideDown-W" />          <input type="button" value="Xcover" />          <input type="button" value="Xmove" />          <input type="button" value="Xdrag" />         </div><div><h1>什么时候能拖动我啊</h1><ul><li>Author:popper.w</li><li>Email:popper11@126.com</li><li>QQ:84101340</li><li>webSite: [url]www.hongwei2008.cn[/url]</li></ul></div><div></div><p>  </body>  </html>  <script type="text/javascript">  $("test1").onclick=function(){  XslideUp($("odiv"),"height",20,10);  }  $("test2").onclick=function(){  XslideDown($("odiv"),"height",200,10);  }  $("test3").onclick=function(){  XslideUp($("odiv"),"width",100,10);  }  $("test4").onclick=function(){  XslideDown($("odiv"),"width",400,10);  }  var m=new Xcover("yellow",50);  $("test5").onclick=function(){      //      //Xdrag($("test"),$("dd"));      m.start();      //  }  $("test6").onclick=function(){      Xmove($("ho"),50,100);  }  $("test7").onclick=function(){  XSetCss($("oTitle"),{height:"30px",lineHeight:"30px",textIndent:"20px",fontSize:"12px",background:"#cbcbcb"})  Xdrag($("ho"))  Xdrag($("odiv"),$("oTitle"));  }  </script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

2 层打开效果

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

—-想了解更多的linux相关异常处理怎么解决关注<计算机技术网(www.ctvol.com)!!>

本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址：https://www.ctvol.com/htmltutorial/75304.html

兼容ie ff div 层 打开+关闭+ 拖动+遮罩+移动+动画改变高宽分享

精彩推荐

兼容ie ff div 层打开+关闭+ 拖动+遮罩+移动+动画改变高宽分享