您好,欢迎访问一九零五行业门户网

IE/FireFox具备兼容性的拖动代码_javascript技巧

特点:
1、兼容 ie6、ff、opear(ie7还没有机会测试)
2、拖动流畅
3、起点与终点之间有过渡,使移动更平滑(可调)
演示
/*
    author:misshjn
    homepage:http://www.happyshow.org
    date:2007-04-30
拖动开始
*/
function _getstyle(element,styleprop){
    if (element.currentstyle){
        var y = element.currentstyle[styleprop];
    }else if (window.getcomputedstyle){
        var y = document.defaultview.getcomputedstyle(element,null).getpropertyvalue(styleprop.replace(/([a-z])/g,-$1).tolowercase());
    }
    return y;
}
function _elementonmousedown(evt,blockid){
    var obj, temp;
    obj=document.getelementbyid(blockid);
    var x = evt.clientx || evt.pagex;
    var y = evt.clienty || evt.pagey;
    obj.startx=x-obj.offsetleft;
    obj.starty=y-obj.offsettop;
var d = document.createelement(div);
    d.style.position = absolute;
    d.style.width = obj.clientwidth + parseint(_getstyle(obj,borderleftwidth),10) + parseint(_getstyle(obj,borderrightwidth)) -2 + px;
    d.style.height = obj.clientheight + parseint(_getstyle(obj,bordertopwidth),10) + parseint(_getstyle(obj,borderbottomwidth)) -2 + px;
    d.style.border = 1px dashed #666;
    d.style.top = _getstyle(obj,top);
    d.style.left = _getstyle(obj,left);
    d.style.zindex = 9999;
    document.body.appendchild(d);
    document.onmousemove=function(evt){
        d.style.left= (evt?evt.pagex:event.clientx) - obj.startx + px;
        d.style.top= (evt?evt.pagey:event.clienty) - obj.starty + px;
    };
    document.onmouseup=function(){
        var objl = parseint(_getstyle(obj,left),10);
        var objt = parseint(_getstyle(obj,top),10);
        var obj2l = parseint(d.style.left,10);
        var obj2t = parseint(d.style.top,10);
var todolist = [];
        var level = 10;  //元素移动从起点到终点之间过渡的级数,大于0的整数
        var speed = 10; //毫秒,每次移动的间隔时间,数字越大,动画感越强,但跳跃感也越大
        for (i=1; i            todolist.push(function(t){
                settimeout(function(){
                    obj.style.left = objl + (obj2l-objl)*(t/level) + px;
                    obj.style.top = objt + (obj2t-objt)*(t/level) + px;
                    if(t==i)todolist=null;
                },speed*arguments[0]);
            });
        }
        for (i=1; i            todolist[i-1](i);
        }
        document.body.removechild(d);
        document.onmousemove = null;
        document.onmouseup = null;
    };
}
/*
    拖动结束
*/
其它类似信息

推荐信息