陆续发出一些自己搜集的网页特效代码……

石忠 · 发表于 2010 年 11 月 14 日 21:08:31

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？注册

×

本帖最后由猫喝的果粒橙于 2010-11-2 13:53 编辑
先发一个“iPhone手机拖曳式图片查看器”。
演示：http://www.zzsky.cn/effect/content/2285.htm。
代码：

<!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>
<title>中国站长天空-网页特效-图片特效-iPhone手机拖曳式图片查看器</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">
*{padding:0;margin:0;}
li{list-style:none;}
body{background:#333;}
#iphone{width:900px;height:600px;background:url(http://www.zzsky.cn/effect/images/201010250045/bg.png);position:absolute;top:50%;left:50%;margin:-300px 0 0 -450px;}
#wrap{width:238px;height:360px;position:absolute;top:121px;left:326px;overflow:hidden;}
#iphone ul{width:960px;height:361px;cursor:pointer;position:absolute;top:0px;left:0px;}
#iphone li{float:left;width:240px;height:360px;overflow:hidden;}
</style>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/201010250045/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>
<span style="color:#ffffff;">鼠标拖曳手机屏幕图片左右翻页！</span><br>

<div id="iphone">
      <div id="wrap">
            <ul>
                     <li style="background:url(http://www.zzsky.cn/effect/images/201010250045/pic1.png);" title=""></li>
                     <li style="background:url(http://www.zzsky.cn/effect/images/201010250045/pic2.png);" title=""></li>
                     <li style="background:url(http://www.zzsky.cn/effect/images/201010250045/pic3.png);" title=""></li>
                     <li style="background:url(http://www.zzsky.cn/effect/images/201010250045/pic4.png);" title=""></li>
            </ul>
      </div>
</div>
</body>
</html>

复制代码

账号		自动登录	找回密码
密码			注册

[转贴] 陆续发出一些自己搜集的网页特效代码……

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。