9顶

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

稿源：互联网 2022-04-02 21:40:12 点击： 22685 撤稿纠错

原理其实很简单：先实现图片的X轴方向拖拽，并且加上弹性运动。这里只有一个小技巧，就是当鼠标向左或者向右拖拽时，计算一下当前图片和可视区域的中心点位置，如果中心点位置发生的偏移量大于某个值，就相应的做弹性平滑移动……

以下讨论的是和iPhone 查看器相关的仿iPhone手机图片查看器的效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

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

关于仿iPhone手机图片查看器的效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011032969134.shtml方便下次再访问哦。

·上一篇： 仿FLASH的竖向导航特效
·下一篇： 网页图片放大镜特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

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

文章分类LIST >>返回首页

最新游戏

最新新闻