javascript 练笔
自己上班没事写的一段javascript脚本
主要是可以给元素添加移动、消失的效果
也还有很多bug不过貌似是我的极限了
一直解决不了
比如 div 没有设置 left、top的时候...... 快速拖动div的时候..
如果有高手看到,指点一二.
Code<html>
<head>
<style>
#mousetitle
{
cursor:pointer;
border:1px gray solid;
background:pink;
color:red;
width:100px;
height:300px;
font-size:12px;
filter:alpha(opacity=40); /* IE */
-moz-opacity:0.4; /* Moz + FF */
opacity: 0.4; /* 支持CSS3的浏览器（FF 1.5也支持）*/
}
#moveLayer
{
width:400px;
height:100px;
border:1px gray solid;
background-color:pink;
}
</style>
<script type="text/javascript">
var AddMoveFeatrue = function()
{
var point ={ mouseX:0,mouseY:0,differenceX:0,differenceY:0 };
//鼠标按下事件
var mousedown = function()
{
var e = arguments[0] || window.event; //得到事件源(鼠标)
//ie e.button = 1 为左键 ff e.button =0 为左键
if( (window.event && e.button == 1) || (arguments[0] && e.button == 0))
{
this.movetag = true;
this.zindex = this.style.zIndex;
this.style.zIndex = 1000;//移动到最上面
//移动前准备
this.style.position = "absolute";
this.style.left = this.style.left ? this.style.left : 0;
this.style.top = this.style.top ? this.style.top : 0;
point.mouseX = e.clientX;
point.mouseY = e.clientY;
this.innerHTML ="star:" + this.movetag;
}
};
//鼠标移动事件
var mousemove = function()
{
if(!this.movetag) return;
var e = arguments[0] || window.event;
//计算元素位置 (元素移动前位置 + （鼠标移动后位置 -鼠标移动前位置）)
this.style.left = parseInt(this.style.left.match(/\d+/)) + e.clientX - point.mouseX;
this.style.top = parseInt(this.style.top.match(/\d+/)) + e.clientY - point.mouseY;
//记录鼠标位置
point.mouseX = e.clientX;
point.mouseY = e.clientY;
this.innerHTML ="move:" + this.movetag;
};
//鼠标放开事件
var mouseup = function()
{
this.movetag = false; //移动标记
this.style.zIndex = this.zindex; //记录层次
this.innerHTML ="mouseup:" + this.movetag;
};
//鼠标移出事件
var mouseout = function()
{
this.movetag = false;
this.style.zIndex = this.zindex;
this.innerHTML ="mouseout:" + this.movetag;
};
//返回一个函数
function returnFun(funName,obj)
{
//复制参数
var array = new Array();
for(var i= 2; i < arguments.length; i++ )
array.push(arguments[i]);
return function()
{
funName.apply(obj,array);
};
}
//显示、隐藏元素
var together = function()
{
function interval(){
//如果为false或者underfined则表示执行第一次动作
if( !!!this.opacity )
{
if( this.flag ) //为true时 隐藏元素
{
this.opacity = 100;//初始透明度
this.eval = "this.opacity -= 11;";//透明度计算表达式
}
else //为false时 显示元素
{
this.style.display = this.display;
this.opacity = 0;
this.eval = "this.opacity += 11;";
}
}
this.style.filter = "alpha(opacity=" + this.opacity + ")";// ie
this.style.opacity = this.opacity / 100; //ff
this.opacity = eval(this.eval); //计算透明度
//继续动作的条件 隐藏时：(this.flag为true,并且透明度大于0之前将一直执行动作,反之亦然)
if( (this.flag && this.opacity > 0) || (!this.flag && this.opacity < 100))
{
window.setTimeout(returnFun(interval,this),50);
}
else //设置标记
{
if( this.flag ) //隐藏动作 去掉占用的空间
{
this.display = this.style.display ? this.style.display : "block";//记录元素表现形式
this.style.display = "none";
}
this.opacity = false;
}
}
//标记 true 为隐藏 false 为显示 初始值为true
this.flag = !this.flag;
window.setTimeout(returnFun(interval,this),0);
};
//添加事件、方法、属性
for(var i =0 ; i< arguments.length ; i++)
{
arguments[i].onmousedown = mousedown;
arguments[i].onmousemove = mousemove;
arguments[i].onmouseup = mouseup;
arguments[i].onmouseout = mouseout;
arguments[i].together = together;
arguments[i].ondblclick = together;
}
}
window.onload = function()
{
new AddMoveFeatrue(document.getElementById('moveLayer'),document.getElementById('mousetitle'));
}
</script>
</head>
<body >
<div id="mousetitle">
</div>
<div id="moveLayer"></div>
<input type="button" value="隐藏/显示" onclick = "document.getElementById('moveLayer').together();" />
</body>
</html>
