iphone屏幕拖动特效jquery代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 iphone屏幕拖动特效jquery代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>abc</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="perfectDrag.js"></script>
<script type="text/javascript"> 
var oTimer=null;
var iSpeed=0;
var iNow=0;
 
window.onload=function ()
{
	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;
					}
				}
			}
			startMove(-iNow*oUl.getElementsByTagName('li')[0].offsetWidth);
		}
	);
};
 
function startMove(iTarget)
{
	if(oTimer)
	{
		clearInterval(oTimer);
	}
	
	oTimer=setInterval("doMove("+iTarget+")", 30);
}
 
function doMove(iTarget)
{
	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)
	{
		clearInterval(oTimer);
		oTimer=null;
		l=iTarget;
	}
	
	oUl.style.left=l+'px';
}
 
function stopMove()
{
	if(oTimer)
	{
		clearInterval(oTimer);
	}
}
</script>
</head>
 
<body>

	<div id="iphone">
<!--loop photo start-->		<div id="wrap">
			<ul>
				<li style="background: url(images/01.jpg)" title="Sunlife阳光妈妈">
					&nbsp;</li>
				<li style="background: url(images/02.jpg)" title="Sunlife阳光妈妈">
					&nbsp;</li>
				<li style="background: url(images/03.jpg)" title="Sunlife阳光妈妈">
					&nbsp;</li>
				<li style="background: url(images/04.jpg)" title="Sunlife阳光妈妈">
					&nbsp;</li>
				<li style="background: url(images/05.jpg)" title="Sunlife阳光妈妈">
					&nbsp;</li>
			
			</ul>
		</div>
	</div>
</body>
</html>

JS代码(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.onmousedown=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.onmousedown=function (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;
	this.fnDoMove(x-this.__oStartOffset__.x,y-this.__oStartOffset__.y);
}
;

CSS代码(style.css):

*{padding:0;margin:0;}
li{list-style:none;}
#iphone{width:843px;height:600px;background:url(bg.png) no-repeat;position:relative;}
#wrap{width:238px;height:360px;position:absolute;top:121px;left:303px;overflow:hidden;}
#iphone ul{width:4600px;height:361px;cursor:pointer;position:absolute;top:0px;left:0px;}
#iphone li{float:left;width:240px;height:360px;overflow:hidden;}

附件:下载该文件资源,减少时间成本(增值服务)