陆续发出一些自己搜集的网页特效代码……
本帖最后由 猫喝的果粒橙 于 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">
<!--把下面代码加到<head>与</head>之间-->
<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');
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').offsetWidth);
}
);
};
function startMove(iTarget)
{
if(oTimer)
{
clearInterval(oTimer);
}
oTimer=setInterval("doMove("+iTarget+")", 30);
}
function doMove(iTarget)
{
var oUl=document.getElementById('wrap').getElementsByTagName('ul');
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>
<!--把下面代码加到<body>与</body>之间-->
<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>
页:
[1]