java 仿 苹果_使用java模仿苹果的屏幕拖拽

1、创建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. (ev)

{

obj.startDrag(window.event || ev);

return false;

};

this.fnOnMouseUp=function (ev)

{

obj.stopDrag(window.event || ev);

};

this.fnOnMouseMove=function (ev)

{

obj.doDrag(window.event || ev);

return false;

};

}

MiaovPerfectDrag.prototype.enable=function ()

{

var obj=this;

this.oElement. (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);

}

};

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;

if(dqtype=='canmovediv'&&startx==0){

startx = x;

}else if(startx!=0){

endx=x;

}

//控制第一页和最后一页都是只能偏移100px，页面有个id为logintype的input，用来保存当前是第几个页面

var logintype = $('#logintype').val();

if(logintype=='1'){

var oUl=document.getElementById('wrap').getElementsByTagName('ul')[0];

var l=oUl.offsetLeft;

if(l>50){

return false;

}

}else if(logintype=='4'){

var oUl=document.getElementById('wrap').getElementsByTagName('ul')[0];

var l=oUl.offsetLeft;

if((l-(-1024*3))

return false;

}

}

this.fnDoMove(x-this.__oStartOffset__.x, y-this.__oStartOffset__.y);

};

var oTimer=null;

var iSpeed=0;

var iNow=0;

window. ()

{

var oUl=document.getElementById('wrap').getElementsByTagName('ul')[0];

var iStartX;

new MiaovPerfectDrag

(

oUl,

function ()

{

return {x:oUl.offsetLeft, y:oUl.offsetTop};

},

function (x, y)

{

oUl.style.left=x+'px';

//oUl.style.top=y+'px';

},

function ()

{

stopMove();

iStartX=oUl.offsetLeft;

},

function () //当拖拽结束

{

if(Math.abs(oUl.offsetLeft-iStartX)>=50)

{

if(oUl.offsetLeft>iStartX)

{

iNow--;

if(iNow<0)

{

iNow=0;

}

}

else

{

iNow++;

if(iNow>=oUl.getElementsByTagName('li').length)

{

iNow=oUl.getElementsByTagName('li').length-1;

}

}

}

//这个方法是拖拽结束之后执行的，需要自己加的方法可以加在这

startx=0;endx=0;

var logintype = $('#logintype').val();

$('#logintype').val(iNow+1);

startMove(-iNow*oUl.getElementsByTagName('li')[0].offsetWidth,(parseInt(logintype)-(iNow+1)));

}

);

};

/*默认移动*/

function startMove(iTarget,type)

{

if(oTimer)

{

clearInterval(oTimer);

}

oTimer=setInterval("doMove("+iTarget+","+type+")", 30);

}

function doMove(iTarget,type)

{

//document.getElementById("userLoginId"+(iNow+1)).focus();

var oUl=document.getElementById('wrap').getElementsByTagName('ul')[0];

var l=oUl.offsetLeft;

iSpeed+=(iTarget-oUl.offsetLeft)/5;

iSpeed*=0.7;

l+=iSpeed;

//if(Math.abs(iTarget-oUl.offsetLeft)<1 && Math.abs(iSpeed)<1)

if((iTarget-l>0&&type<0) || (iTarget-l<0&&type>0))

{

document.getElementById("userLoginId"+(iNow+1)).focus();

clearInterval(oTimer);

oTimer=null;

l=iTarget;

iSpeed=0;

}

oUl.style.left=l+'px';

}

/*点击上面的标题移动start*/

function startMovetit(iTarget,type)

{

if(oTimer)

{

clearInterval(oTimer);

}

oTimer=setInterval("doMovetit("+iTarget+","+type+")", 60);

}

var movei=0;

function doMovetit(iTarget,type)

{

var oUl=document.getElementById('wrap').getElementsByTagName('ul')[0];

var l=oUl.offsetLeft;

if(movei==0 && type<0){

iSpeed=-100

}else if(movei==0 && type>0){

iSpeed=100

}else if(type<0){

iSpeed=-200

}else{

iSpeed=200

}

if(movei==2 && type<0){

l +=  (type+1)*1024;

}else if(movei==2 && type>0){

l +=  (type-1)*1024;

}

movei++;

//iSpeed+=(iTarget-oUl.offsetLeft)/5;

//iSpeed*=0.6;

//if(iSpeed>200){

// iSpeed==200;

//}

l+=iSpeed;

if((iTarget-l>0&&type<0) || (iTarget-l<0&&type>0))

{

clearInterval(oTimer);

oTimer=null;

l=iTarget;

iSpeed=0;

movei=0;

}

oUl.style.left=l+'px';

}

/*点击上面的标题移动end*/

function stopMove()

{

if(oTimer)

{

clearInterval(oTimer);

}

}

2、创建css

* { padding: 0; margin: 0; }

li { list-style: none; }

body { background: #333; }

#iphone { width: 1024px; height: 740px;  position: absolute; top: 0px; left: 0px; }

#wrap { url("img /loginbj.jpg") repeat-x;width: 1024px; height: 740px; position: absolute; top: 0px; left: 0px; overflow:hidden; background-color: #3076A7;}

#iphone ul { width: 5000px; height: 1401px; cursor: pointer; position: absolute; top: 0px; left: 0px; }

#iphone li { float: left; width:1024px; height:740px; z-index: 0;}

3、页面内容

• 页面1

• 页面2

• 页面3