您的位置：首页 > Web前端 > JavaScript

google的首页动画效果[JS]

2008-10-21 14:53 567 查看

<!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" c />

<title>google.cn 的一个效果</title>

<style>

/*http://www.zishu.cn*/

*{ padding:0; margin:0; list-style:none; font-size:12px;}

#nav{margin:50px;}

#nav li{padding:15px 0}

#nav li a{display:block;cursor:pointer;cursor:hand;}

#nav li a span{ margin:-15px 0 0 -40px;position:absolute; background:url(http://www.zishu.cn/attachments/month_0711/n20071113221019.png) no-repeat; display:block;height:33px; width:40px;}

</style>

</head>

<body>

<div id="nav">

<ul>

<li id="info_1"><a href="http://www.zishu.cn/"><span id="span_1"></span>谷歌拼音输入法</a></li>

<li id="info_2"><a href="http://www.zishu.cn/"><span id="span_2"></span>谷歌工具条</a></li>

<li id="info_3"><a href="http://www.zishu.cn/"><span id="span_3"></span>手机位置</a></li>

<li id="info_4"><a href="http://www.zishu.cn/"><span id="span_4"></span>在线翻译</a></li>

<li id="info_5"><a href="http://www.zishu.cn/"><span id="span_5"></span>列车时刻</a></li>

<li id="info_6"><a href="http://www.zishu.cn/"><span id="span_6"></span>网速测试</a></li>

<li id="info_7"><a href="http://www.zishu.cn/"><span id="span_7"></span>万年历</a></li>

<li id="info_8"><a href="http://www.zishu.cn/"><span id="span_8"></span>这个不知道</a></li>

</ul>

</div>

<script language="JavaScript">

var info = document.getElementById('nav');

function navScrollBg(e,num,flag) {

var a=[0,40,80,120,160,200,240];

var spans = document.getElementById('span_'+num);

if(flag == 1){

spans.style.backgroundPosition = (0 - a[e]) + 'px' + ' ' + (0-((num-1)*33)) +'px';

}else{

a.sort(function(b,c){return c-b;});

spans.style.backgroundPosition = (0 - a[e]) + 'px' + ' ' + (0-((num-1)*33)) +'px';

}

}

function onBg(num,flag){

for(var e=0; e<7; e++){

setTimeout("navScrollBg(" + e + "," + num +","+flag+")",40 * e);

}

}

</script>

</body>

</html>
《====================================================================》

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>-==徐长伟==-</title>

<style type="text/css">

    

</style>

<script language="javascript">

    window.onload=function()

    {

        var tt=document.getElementsByTagName('div')[0];

        var cs=tt.getElementsByTagName('label'),ct=tt.getElementsByTagName('p');

        for(var i=0;i<cs.length;i++)

        {

            cssAni(ct[i],cs[i],7);

        }

    }

    function cssAni(osrc,otarget,num,duration)

    {

        var t=null,c=1,d=0,n=0,i=Math.floor((duration||300)/num);

        var s=otarget.className.replace(/.$/,''),r=/over/;

        osrc.onmouseover=osrc.onmouseout=function(e)

        {

            n=r.test((e||event).type)?1:-1;

            if(!t) t=setInterval(function()

            {

                if((c==1||c==num)&&((d==n||c+n<1)||!(d=n)))

                return clearInterval(t),t=null;

                otarget.className=s+(c+=d);

            },i);

        };

    }

</script>

</head>

<body>

    <div>

        <label class='a f1'></label>

        <label class='b f1'></label>

        <label class='c f1'></label>

        <label class='d f1'></label>

        <label class='e f1'></label>

        <label class='f f1'></label>

        <label class='g f1'></label>

        <p><a href="http://www.13141516.com" target="_blank">千秋家园网</a></p>

        <p><a href="http://user.qzone.qq.com/371766377" target="_blank">我的Qzone</a></p>

        <p>C</p>

        <p>D</p>

        <p>E</p>

        <p>F</p>

        <p>G</p>

    </div>

</body>

</html>

用到的图片和 html 文件放在统一目录下

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航