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

更新时间：2008年07月09日 23:11:52 作者：

div层打开+关闭+ 拖动+遮罩+移动+动画改变高宽的实例js代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>popper.w's code</title>      <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> <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>";         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>           <div id="aa"></div>        <div id="test">         <h1 id="dd">Just a Test</h1>         <input type="button" id="test1" value="XslideUp-H" />         <input type="button" id="test2" value="XslideDown-H" />         <input type="button" id="test3" value="XslideUp-W" />         <input type="button" id="test4" value="XslideDown-W" />         <input type="button" id="test5" value="Xcover" />         <input type="button" id="test6" value="Xmove" />         <input type="button" id="test7" value="Xdrag" />        </div>        <div id="odiv">        <h1 id="oTitle">什么时候能拖动我啊</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 id="ho"></div> </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需再刷新一下页面才能执行]

javascript hashtable实现代码
javascript中没有像c#,java那样的哈希表(hashtable), 然而，javascript中的Array也只有一些类似于'哈希表'的非常简单功能。
2009-10-10
JavaScript中如何调用Java方法
这篇文章主要介绍了JavaScript中如何调用Java方法，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
2020-09-09
js获取图片长和宽度的代码
js获取图片长和宽的代码，大家可以参考下。
2009-11-11
JavaScript变量声明详解
本文详细向大家介绍了javascript变量声明，并通过示例进行了具体分析，是篇非常不错的文章，这里推荐给刚入门的jser。
2014-11-11
JS中循环字符串拼接时加换行问题
这篇文章主要介绍了JS中循环字符串拼接时加换行问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
js 用CreateElement动态创建标签示例
用CreateElement动态创建标签，主要是html中常用的一些标签，在本文有详细的示例，喜欢的朋友可以参考下
2013-11-11
深入理解js A*寻路算法原理与具体实现过程
这篇文章主要介绍了js A*寻路算法原理与具体实现过程,结合实例形式详细分析了A*寻路算法的具体概念、原理、实现方法与相关操作技巧,需要的朋友可以参考下
2018-12-12
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
求得1-1000所有出现1的数字，并计算出现1的个数，以下是采用枚举的实现方法，但是若从1-N就不管用了，因为N不一定会是多少
2013-09-09
前端大屏适配的三种解决方案总结
在日常前端开发中,大屏项目是每个前端开发者必备技能,但是目前设备尺寸大小和分辨率都不相同,所以大屏适配成了一个头疼的问题,所以下面这篇文章主要给大家介绍了关于前端大屏适配的三种解决方案,需要的朋友可以参考下
2024-03-03
JS实现把一个页面层数据传递到另一个页面的两种方式
这篇文章主要介绍了JS实现把一个页面层数据传递到另一个页面的方式,本文给大家提供了两种方式，需要的朋友可以参考下
2018-08-08