Question

Aloha Stockoverflow。

提前，谢谢！我试图在我的网页上修改我随机改变的背景，添加一个FADE效果，所以从一个背景到另一个背景的变化不是那么突然和尖锐。我试图通过网络无休止地搜索我的问题的解决方案，但这一切都指向添加一个jQuery插件，如果可能的话我最好避免。

我的工作代码如下，需要添加某种fadein / fadeout效果。

<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>

非常感谢你花时间去看它。：）

Answer 1

如何在没有插件的情况下执行此操作：

使用2个图层作为背景图像，将它们放在彼此的顶部。
使用底层的第一个图片初始化页面，使顶层不可见（使用CSS opacity属性，确保谷歌这一点，不同的浏览器使用不同的方法）。

褪色时：

设置顶层的新图像。
使用简短的循环（frameduration＆lt; 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 /...

祝你好运！

随机变化背景与淡入淡出效果

1 个答案: