1

私は現在、車の画像を色で塗りつぶして、修理の完了率の観点から進行状況を表す必要があるプロジェクトに取り組んでいます。これは、読み込み中の gif のようですが、ページが表示されたときに設定する完了率までです。ロードします。すべてのブラウザーでこれを行うために、jquery とアニメーションを使用し、1 つの画像 (色のない車) を背景画像として使用し、別の画像 (色で塗りつぶされた車) をその上に配置しました。ページの読み込み時に、塗りつぶされた車の効果を作成するために、色付きの画像の一部を表示しようとしています。私のコードは以下です。

Googleで似たようなものを高低で検索しましたが、答えが見つからないので、どんな助けも素晴らしいでしょう

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>repair progress</title>
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
        <style type='text/css'>
            li#home {
                background: url('carnotfilledin.jpg') no-repeat;
                z-index:-1;
                width: 214px;
                height: 398px;
            }
            #home a{
                display: block;
                padding-top:0px;
                width: 100%;
                height: 0px;
                position:relative;
                left:0px;
                top:-20px;
                left:-2px;
            }
            img.hover {
                display: none;
                width: 214px;
                height: 398px;
            }
            .nav {
                background-color:#292929;
                padding:20px;
            }
        </style>

        <script type='text/javascript'>//<![CDATA[ 
            $(window).load(function() {

                $('img.hover').css('display', 'block');
                $('#home a').animate({height: '20%'}, 2000);
            });//]]>  
        </script>
    </head>
    <body>
        <div class="nav">
            <ul>
                <li id="home"><a href="newpagelayout4.html"><img src="carfilledin.jpg" class="hover" ></a></li>
            </ul>
        </div>
    </body>
</html>
4

0 に答える 0