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 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}

function $ (o) {
return document.getElementById(o);
}
function XCreateElement(tagName,tagParent,attrs)
{
if(tagName&&arguments.lengthmX){
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] end;
//步进start
st ? start-=step : start+=step;
//当start和end的关系发生变化时停止运行
if((start双击关闭

";
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;
}

Just a Test

什么时候能拖动我啊

• Author:popper.w
• Email:popper11@126.com
• QQ:84101340
• webSite: [url]www.hongwei2008.cn[/url]

$("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"));
}

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

2 层打开效果

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}

/*
popper.w code
class: XopenDiv
version: 1.0
date: 2008-5-19
*/

Code By popper.w

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(){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"))
}

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