0

http://semep.com.brに Web サイトを公開しました。

背景写真は、このページのバナーごとに変更されます。背景のフェードとして写真にトランジション効果を配置したいと思います。

CSS ルール

#fullbackground{

    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;

    transition: background-image 800ms ease-in-out;
     -moz-transition: background-image 800ms ease-in-out;
     -ms-transition: background-image 800ms ease-in-out;
     -o-transition: background-image 800ms ease-in-out;
    -webkit-transition: background-image 800ms ease-in-out; 
}

背景画像を変更するスクリプト

  window.modificarBackground = function(bgArquivo) {
    if (screen.width > 1280) {
      bgArquivo = "url('/Images/Fundo/1600/" + bgArquivo + "')";
    }
    if (screen.width <= 1024) {
      bgArquivo = "url('/Images/Fundo/1024/" + bgArquivo + "')";
    }
    if (screen.width > 1024 && screen.width <= 1280) {
      bgArquivo = "url('/Images/Fundo/1280/" + bgArquivo + "')";
    }
    return $("#fullbackground").css("background-image", bgArquivo);
  };

クロームで完璧に動作します！

この効果のための他のブラウザでは、空白の画面です!

4

1 に答える 1

0

CSS を使用しようとしていることは知っていますが、jQuery を使用する場合はどうでしょうか。私は最近、このようなことをしたいと思っていました。関数fadeInとfadeOutを使用しました。これらはあなたに役立つかもしれません。

次のリンクが役立つ場合があります。

http://api.jquery.com/fadeIn/

http://api.jquery.com/fadeOut/

于 2012-07-11T15:24:51.887 に答える