仿iPhone手机图片查看器的效果-JS特效-爱易网页

仿iPhone手机图片查看器的效果

日期：2014-05-18　浏览次数：20626 次

以下是程序代码

<!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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

仿iPhone手机图片查看器的效果

相关资料更多>

推荐阅读更多>