0

これを実装しようとしていますhttp://jsfiddle.net/aVUxD/3/ ここにhttp://22twenty.com/wallspace/

ここで作成されたのは、ロード時にバックグラウンドでフェードインする方法ですか? HTML:

<!DOCTYPE html>
<html lang="en">
<!--To Do: -->
<!-- list menu logo size  -->
<!--all other pages -_- -->
  <head>
    <meta charset="utf-8">
    <title>Wall Space Gallery And Framing</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
  <link rel="stylesheet" href="css/style.css">
<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->
  </head>
  <body>



<header>
                <div id="wrap">
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-3.jpg" />
</div>
​
                    <div class="logo">
                                        <a id="single_image" href="index.html"><img src="img/logo.png" alt=""/></a>
                    </div> 

                    <ul id="navigation">
                        <li id="active"><a href="index.html" alt="home" >Home</a></li>
                        <li><a href="exhibitions.html" alt="Exhibitions"> Exhibitions</a></li>
                        <li><a href="artists.html" alt="Artists"> Artists</a></li>
                        <li><a href="contact.html" alt="Contact"> Contact</a></li>
                    </ul>


</header>


                <div id="content">


                </div>

<footer>
    <div id="copyright">
        <p>Copyright &copy Wall Space Gallery And Framing 2012</p>
    </div>

    <div id="twenty">
        <p>Website By <a href="http://www.22twenty.com">22Twenty</a> Web Solutions</p>
    </div>    
</footer>




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.min.js"></script>
<script>
$(document).ready(function(){
    $('img').hide();

function anim() {
    $("#wrap img").first().appendTo('#wrap').fadeOut(2000);
    $("#wrap img").first().fadeIn(2000);
    setTimeout(anim, 4000);
}
anim();​

)};
</script>
</body>
</html>

css は長すぎますが、ここでソースを表示できます: http://22twenty.com/wallspace/

他のブラウザについてはわからないクロムで動作するはずです

誰かが助けてくれることを願っています!

ありがとう

デンバー

4

1 に答える 1

0

でフォアグラウンド イメージを使用しているため、バックグラウンド フェードは適用できないようです#wrap。

あなたが何を望んでいるかについての私の理解に基づいて、私はここで何かが働いています。

フィドルの css は、スタイルシートよりもカスケードの方が低いため、優先されます。画像に合わせてヘッダーの高さを調整します。すべての画像が同じサイズである場合、 #wrapoverflow:hiddenは必要ありません。例の画像はそうではありません。

于 2012-05-21T07:15:10.580 に答える