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.onmousedown=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.onmouseup=this.fnOnMouseUp;
this.oElement.onmousemove=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.onmouseup=null;
this.oElement.onmousemove=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))<-50){
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、页面内容
<div id="iphone">
<div id="wrap">
<ul>
<li>
页面1
</li>
<li>
页面2
</li>
<li>
页面3
</li>
</ui>
</div>
</div>
