兼容ieffdiv层打开+关闭+拖动+遮罩+移动+动画改变高宽_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:39:36

兼容ieffdiv层打开+关闭+拖动+遮罩+移动+动画改变高宽_javascript技巧

兼容ieffdiv层打开+关闭+拖动+遮罩+移动+动画改变高宽_javascript技巧:1 拖动+遮罩+移动+改变元素大小 popper.w's code body{text-align:center} #dd{ margin:50px auto} #odiv{ width:400px; height:200px;border:1px dotted red; border:1px dashed green;} #odiv

推荐度：

点击下载本文 文档为doc格式

导读兼容ieffdiv层打开+关闭+拖动+遮罩+移动+动画改变高宽_javascript技巧:1 拖动+遮罩+移动+改变元素大小 popper.w's code body{text-align:center} #dd{ margin:50px auto} #odiv{ width:400px; height:200px;border:1px dotted red; border:1px dashed green;} #odiv

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

<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> 
 
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> 
 
 
 <h1 id="dd">Just a Test</h2> 
 <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" /> 
 
 
 <h1 id="oTitle">什么时候能拖动我啊</h2> 
 
 <li>Author:popper.w</li> 
 <li>Email:popper11@126.com</li> 
 <li>QQ:84101340</li> 
 <li>webSite: [url]www.hongwei2008.cn[/url]</li> 
 
 
 
</body> 
</html> 
 
$("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 层打开效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{} #main{width:500px; margin:100px; height:500px;border:1px solid red} #test{border:1px solid red;display:none;width:10px;height:10px; background:yellow} </style> /* popper.w code class: XopenDiv version: 1.0 date: 2008-5-19 */ </ script> <title>Code By popper.w</title> </head> <body> <input type="button" value="点击打开" id="bt" /> <input type="button" value="点击关闭" id="bt1" /> </body> </html> function $ (o) { return document.getElementById(o); } function XslideDown(obj,type,mX,num) { if(!type){return;} try{ var type1=type=="height"?"marginTop":"marginLeft"; var type2=type=="height"?"top":"left"; XSetCss(obj,[type1,XgetOffset(obj)[type2]+"px"]); XSetCss(obj,[type,XgetOffset(obj)[type]+num+"px"]); if(XgetOffset(obj)[type]<mX){ setTimeout(function(){XslideDown(obj,type,mX,num);},10); } else{ XSetCss(obj,[type,mX]) } } catch(e){} } function XslideUp(obj,type,mX,num) { if(!type){return;} try{ var type1=type=="height"?"marginTop":"marginLeft"; var type2=type=="height"?"top":"left"; XSetCss(obj,[type1,XgetOffset(obj)[type2]+"px"]); XSetCss(obj,[type,XgetOffset(obj)[type]-num+"px"]); if(XgetOffset(obj)[type]>mX){ setTimeout(function(){XslideUp(obj,type,mX,num);},1); } else{ XSetCss(obj,[type,mX]) obj.style.display="none"; } } catch(e){} } 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 XgetOffset (obj) { return { height:obj.offsetHeight, width:obj.offsetWidth, top:parseInt((obj.parentNode.offsetHeight-obj.offsetHeight)/2), left:parseInt((obj.parentNode.offsetWidth-obj.offsetWidth)/2) } } function XopenDiv(o){ o.style.display="block"; XslideDown(o,"width",400,10); XslideDown(o,"height",400,10); } function XcloseDiv(o){ XslideUp(o,"width",10,10); XslideUp(o,"height",10,10); } $("bt").onclick=function(){ XopenDiv($("test")) } $("bt1").onclick=function(){ XcloseDiv($("test")) } </ script>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

兼容ieffdiv层打开+关闭+拖动+遮罩+移动+动画改变高宽_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：移动 ff 兼容ie

热门焦点

兼容ieffdiv层打开+关闭+拖动+遮罩+移动+动画改变高宽_javascript技巧

兼容ieffdiv层打开+关闭+拖动+遮罩+移动+动画改变高宽_javascript技巧

兼容ieffdiv层打开+关闭+拖动+遮罩+移动+动画改变高宽_javascript技巧

最新推荐

猜你喜欢

热门推荐