仿IPHONE图片滑动 JS文件

http://www.zhaomu.com

 

perfectDrag.js

//http://www.zhaomu.com
//perfectDrag.js
function MiaovperfectDragSimple(vElement, fnOnDragStart, fnOnDraging, fnOnDragEnd)
{
    var oElementDrag=null;
    
    if(typeof vElement == 'string')
    {
        oElementDrag=document.getElementById(vElement);
    }
    else if(typeof vElement == 'object')
    {
        oElementDrag=vElement;
    }
    
    this.creator=MiaovPerfectDrag;
    
    this.creator
    (
        oElementDrag,
        function ()
        {
            return {x: oElementDrag.offsetLeft, y: oElementDrag.offsetTop};
        },
        function (x, y)
        {
            oElementDrag.style.left=x+'px';
            oElementDrag.style.top=y+'px';
            
            if(fnOnDraging)
            {
                fnOnDraging(x, y);
            }
        },
        fnOnDragStart, fnOnDragEnd
    );
    
    delete this.creator;
}

MiaovperfectDragSimple.prototype=MiaovPerfectDrag.prototype;

function MiaovPerfectDrag(oElementDrag, fnGetPos, fnDoMove, fnOnDragStart, fnOnDragEnd)
{
    var obj=this;
    
    this.oElement=oElementDrag;
    
    this.oElement.style.overflow='hidden';
    
    this.fnGetPos=fnGetPos;
    this.fnDoMove=fnDoMove;
    this.fnOnDragStart=fnOnDragStart;
    this.fnOnDragEnd=fnOnDragEnd;
    
    this.__oStartOffset__={x:0, y:0};
    
    this.oElement.οnmοusedοwn=function (ev)
    {
        obj.startDrag(window.event || ev);
    };
    
    this.fnOnMouseUp=function (ev)
    {
        obj.stopDrag(window.event || ev);
    };
    
    this.fnOnMouseMove=function (ev)
    {
        obj.doDrag(window.event || ev);
    };
}

MiaovPerfectDrag.prototype.enable=function ()
{
    var obj=this;
    
    this.oElement.οnmοusedοwn=function (ev)
    {
        obj.startDrag(window.event || ev);
    };
};

MiaovPerfectDrag.prototype.disable=function ()
{
    this.oElement.οnmοusedοwn=null;
};

MiaovPerfectDrag.prototype.startDrag=function (oEvent)
{
    var oPos=this.fnGetPos();
    
    var x=oEvent.clientX;
    var y=oEvent.clientY;
    
    if(this.fnOnDragStart)
    {
        this.fnOnDragStart();
    }
    
    this.__oStartOffset__.x=x-oPos.x;
    this.__oStartOffset__.y=y-oPos.y;
    
    if(this.oElement.setCapture)
    {
        this.oElement.setCapture();
        
        this.oElement.οnmοuseup=this.fnOnMouseUp;
        this.oElement.οnmοusemοve=this.fnOnMouseMove;
    }
    else
    {
        document.addEventListener("mouseup", this.fnOnMouseUp, true);
        document.addEventListener("mousemove", this.fnOnMouseMove, true);
        
        window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
    }
};
//Download by http://down.liehuo.net
MiaovPerfectDrag.prototype.stopDrag=function (oEvent)
{
    if(this.oElement.releaseCapture)
    {
        this.oElement.releaseCapture();
        
        this.oElement.οnmοuseup=null;
        this.oElement.οnmοusemοve=null;
    }
    else
    {
        document.removeEventListener("mouseup", this.fnOnMouseUp, true);
        document.removeEventListener("mousemove", this.fnOnMouseMove, true);
        
        window.releaseEvents(Event.MOUSE_MOVE | Event.MOUSE_UP);
    }
    
    if(this.fnOnDragEnd)
    {
        if(oEvent.clientX==this.__oStartOffset__.x && oEvent.clientY==this.__oStartOffset__.y)
        {
            this.fnOnDragEnd(false);
        }
        else
        {
            this.fnOnDragEnd(true);
        }
    }
};

MiaovPerfectDrag.prototype.doDrag=function (oEvent)
{
    var x=oEvent.clientX;
    var y=oEvent.clientY;
    
    this.fnDoMove(x-this.__oStartOffset__.x, y-this.__oStartOffset__.y);
};

 

转载于:https://www.cnblogs.com/wryYH/archive/2012/04/16/2451541.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值