1

アロハストックオーバーフロー。

よろしくお願いします！Web ページでランダムに変化する背景を変更して、FADE 効果を追加しようとしています。そのため、ある背景から別の背景への変化はそれほど突然で急激ではありません。私は自分の問題の解決策をウェブで際限なく検索しようとしましたが、可能であれば回避したいjQueryプラグインを追加することをすべて指しています.

私の作業コードは次のとおりで、何らかのフェードイン/フェードアウト効果を追加する必要があります。

<script type="text/javascript">     
   var num;
   var temp=0;
   var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
   var preloads=[];

/* add any number of images here */

preload(
        'images/bg1.jpg',
        'images/bg2.jpg',
        'images/bg3.jpg',
        'images/bg4.jpg',
        'images/bg5.jpg'

       );

function preload(){

for(var c=0;c<arguments.length;c++) {
   preloads[preloads.length]=new Image();
   preloads[preloads.length-1].src=arguments[c];
  }
 }

function rotateImages() {
   num=Math.floor(Math.random()*preloads.length);
if(num==temp){
   rotateImages();
 }
else {
   document.body.style.backgroundImage='url('+preloads[num].src+')';
   temp=num;

setTimeout(function(){rotateImages()},speed);
  }
 }

if(window.addEventListener){
   window.addEventListener('load',rotateImages,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',rotateImages);
  }
 }      
</script>

お時間を割いてご覧いただき、誠にありがとうございます。:)

4

1 に答える 1

1

プラグインなしでそれを行う方法：

  • 背景画像に2つのレイヤーを使用し、それらを互いに重ねて配置します。
  • 最下層の最初の画像でページを初期化し、最上層を非表示にします（CSS不透明度プロパティを使用して、これをGoogleに確認してください。ブラウザーごとに、異なるアプローチが使用されます）。

フェード時：

  • 最上層の新しい画像を設定します。
  • 短いループ（frameduration <40ms）setTimeoutを使用して、最上位レイヤーの不透明度を1にインクリメントします。1/（速度/フレームデュレーション）の増分を使用します。
  • 完全にフェードインしたら、下のレイヤーを新しい（現在表示されている）画像を使用するように設定し、上のレイヤーを不透明度0に設定します。

このような：

<html>
<head>
    <script type="text/javascript">     
        var num;
        var current=0;
        var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
        var fps = 25;
        var fadeDuration = 1000;
        var opacityIncrement = 1/(fadeDuration/(1000/fps));
        var preloads=[];
        var topLayerOpacity = 0;

        var topLayer = document.createElement("div");
        var bottomLayer = document.createElement("div");

        setOpacity(topLayer, 0);

        /* add any number of images here */

        preload(
                'images/bg1.jpg',
                'images/bg2.jpg',
                'images/bg3.jpg',
                'images/bg4.jpg'

               );


        function loadComplete(){
            //add layers to background div
            document.getElementById('backgroundContainer').appendChild(bottomLayer);
            document.getElementById('backgroundContainer').appendChild(topLayer);

            rotateImages();
        }


        function preload(){

            //preload images
            for(var c=0;c<arguments.length;c++) {
                    preloads[preloads.length]=new Image();
                    preloads[preloads.length-1].src=arguments[c];
            }
        }

        // selecte new random image from preloads and start fade-in 
        function rotateImages() {
            num=Math.floor(Math.random()*preloads.length);
            //don't select current image
            if(num==current){
                rotateImages();
            }
            else {
               topLayer.style.backgroundImage = 'url('+preloads[num].src+')';
               current=num;

               //start fade-in
               fadeIn();

               setTimeout(function(){rotateImages()},speed);
            }
        }

        // fade in topLayer
        function fadeIn(){
            if (topLayerOpacity < 1){
                topLayerOpacity += opacityIncrement;
                setOpacity(topLayer, topLayerOpacity);// opacityIncrement);
                setTimeout(fadeIn, 1000/fps);
            }else{
                fadeInComplete();
            }   
        }

        //return opacity for element
        function getOpacity(el){
            alert (el.style.opacity);
            return el.style.opacity;
        }

        //sets opacity on element
        function setOpacity(el, val){
            el.style.opacity = val;
            el.style.filter = 'alpha(opacity=' + val*100 + ')';
        }

        //called when fadeIn completed
        function fadeInComplete(){
            bottomLayer.style.backgroundImage = topLayer.style.backgroundImage;
            topLayerOpacity = 0;
            setOpacity(topLayer, topLayerOpacity);
        }

        if(window.addEventListener){
            window.addEventListener('load',loadComplete,false);
        }
        else { 
            if(window.attachEvent){
                window.attachEvent('onload',loadComplete);
            }
        }      

    </script>

    <style type="text/css">

        #backgroundContainer{
            width:100%;
            height:100%;
            position:absolute;
            /*background-color:green;*/
        }

        #backgroundContainer div{
            width:100%;
            height:100%;
            position:absolute;
            top:0;
        }

        .page {
            width:100%;
            text-align:center;
            position:absolute;
        }

        .contents{
            width:400px;
            margin:0 auto;
            background-color:lightblue;
        }
    </style>
</head>
<body>
    <!-- holds background layers -->
    <div id="backgroundContainer"></div>

    <!-- substitutes for 'body' on this webpage -->
    <div class="page">

        <!-- contents for your webpage, through css centered within page-div -->
        <div class="contents">
            <p>Contents</p>
        </div>
    </div>
</body>
</html>

また

jQuery / mootools / script.aculo.us/..を使用します

頑張ってください！

于 2012-11-09T13:10:03.320 に答える