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/

应该在 chrome 上工作 不确定其他浏览器

希望有人能帮忙！

谢谢

丹佛

4

1 回答 1

0

背景淡入淡出似乎不适用，因为您在#wrap.

根据我对您想要什么的理解，我在这里得到了一些工作。

The css in the fiddle is lower in the cascade than that in your stylesheet, therefore takes precedence. Adjust header height to suit your images. #wrap's overflow:hidden should not be necessary if all images are the same size - those from the example are not.

于 2012-05-21T07:15:10.580 回答