自己上班没事写的一段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>

• javascript