仿iPhone手机图片查看器的效果_仿iphone 图片浏览-优快云博客

本文链接：https://blog.youkuaiyun.com/cloudday/article/details/7357098

这是一个使用HTML、CSS和JavaScript实现的简单iPhone风格图片查看器。该查看器允许用户通过拖动来浏览不同图片，并且能够自动调整位置以平滑过渡到下一张图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://js.alixixi.com/runjs.asp?id=69134&t=37

<!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>iPhone手机图片查看器 - 妙味课堂 - www.miaov.com</title>
<link href="http://www.miaov.com/miaov_demo/iphone/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.miaov.com/miaov_demo/iphone/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">
<div id="wrap">
<ul>
   <li style="background:url(http://www.miaov.com/miaov_demo/iphone/images/pic1.png);" title="妙味课堂"></li>
   <li style="background:url(http://www.miaov.com/miaov_demo/iphone/images/pic2.png);" title="妙味课堂"></li>
   <li style="background:url(http://www.miaov.com/miaov_demo/iphone/images/pic3.png);" title="妙味课堂"></li>
   <li style="background:url(http://www.miaov.com/miaov_demo/iphone/images/pic4.png);" title="妙味课堂"></li>
</ul>
</div>
</div>
</body>
</html>