经典图片拖动预览特效分享，仿iphone收集图片查看器效果，在图片拖动过程带有缓冲显示特效，结合自己需求来修改即可。
<!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=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>js模仿iPhone手机图片拖动切换显示特效_武鸣人</title>
<style type="text/css">
* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #333; }
#iphone_wuming_ren { width: 900px; height: 600px; background: url(/img/20240509_www_wuming_ren_5.jpg); position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -450px; }
#wrap_wuming { width: 238px; height: 360px; position: absolute; top: 121px; left: 326px; overflow:hidden; }
#iphone_wuming_ren ul { width: 960px; height: 361px; cursor: pointer; position: absolute; top: 0px; left: 0px; }
#iphone_wuming_ren li { float: left; width:240px; height:360px; overflow:hidden; }
</style>
<script type="text/javascript">
function MiaovperfectDragSimple(vElement, fnOnDragStart, fnOnDraging, fnOnDragEnd)
{
var oElementDrag=null;
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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;
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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);
};
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
MiaovPerfectDrag.prototype.enable=function ()
{
var obj=this;
this.oElement.onmousedown=function (ev)
{
obj.startDrag(window.event || ev);
};
};
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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();
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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);
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
if(this.fnOnDragEnd)
{
if(oEvent.clientX==this.__oStartOffset__.x && oEvent.clientY==this.__oStartOffset__.y)
{
this.fnOnDragEnd(false);
}
else
{
this.fnOnDragEnd(true);
}
}
};
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
MiaovPerfectDrag.prototype.doDrag=function (oEvent)
{
var x=oEvent.clientX;
var y=oEvent.clientY;
this.fnDoMove(x-this.__oStartOffset__.x, y-this.__oStartOffset__.y);
};
</script>
<script type="text/javascript">
var oTimer=null;
var iSpeed=0;
var iNow=0;
window.onload=function ()
{
var oUl=document.getElementById('wrap_wuming').getElementsByTagName('ul')[0];
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var iStartX;
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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);
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
oTimer=setInterval("doMove("+iTarget+")", 30);
}
function doMove(iTarget)
{
var oUl=document.getElementById('wrap_wuming').getElementsByTagName('ul')[0];
var l=oUl.offsetLeft;
iSpeed+=(iTarget-oUl.offsetLeft)/5;
iSpeed*=0.7;
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
l+=iSpeed;
if(Math.abs(iTarget-oUl.offsetLeft)<1 && Math.abs(iSpeed)<1)
{
clearInterval(oTimer);
oTimer=null;
l=iTarget;
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
oUl.style.left=l+'px';
}
function stopMove()
{
if(oTimer)
{
clearInterval(oTimer);
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="iphone_wuming_ren">
<div id="wrap_wuming">
<ul>
<li style="background:url(/img/20240509_www_wuming_ren_6.png);" title="武鸣人"></li>
<li style="background:url(/img/20240509_www_wuming_ren_7.png);" title="武鸣人"></li>
<li style="background:url(/img/20240509_www_wuming_ren_8.png);" title="武鸣人"></li>
<li style="background:url(/img/20240509_www_wuming_ren_9.png);" title="武鸣人"></li>
</ul>
</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处