JS+CSS实现Google首页的动画效果

最新推荐文章于 2024-06-05 16:53:17 发布

kinglino520

最新推荐文章于 2024-06-05 16:53:17 发布

阅读量697

点赞数

分类专栏： javascript 文章标签： google css class function html javascript

javascript 专栏收录该内容

116 篇文章 0 订阅

订阅专栏

<!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>Imitate-Gogle</title>
<style type="text/css">
    
</style>
<script language="javascript">
    window.οnlοad=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.οnmοuseοver=osrc.οnmοuseοut=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>

kinglino520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS+CSS实现Google首页的动画效果

http://www.w3.org/TR/html4/loose.dtd"> Imitate-Gogle body {text-align:center} div { width:381px; border:1px solid #eeeeee;padding:3px 0;border-bottom-width:5px}
复制链接

扫一扫