视差滚动

文章目录

1. 1. 介绍
2. 2. 实现原理：
3. 3. 代码

介绍

页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层：背景层，内容层，贴图层。在前景、内容、贴图三个部分的移动速率的不同来实现立体效果。

实现原理：

　　背景层的滚动(最慢)

　　贴图层(内容层和背景层之间的元素)的滚动(次慢); 按照现实生活的经验，越远的景物移动越慢。

　　内容层的滚动(可以和页面的滚动速度一致) 。

　　我们让三个图层的滚动速度不一致，就做出了简单的差异滚动效果。

　　当然这只是实现了简单的滚动视差效果，距离一个好的滚动视察网站还不够。

代码

这里给出了视差滚动（图片播放）的html和js代码。

<div id="pxs_container" class="pxs_container">
    <div class="pxs_bg">
        <div class="pxs_bg1"></div>
        <div class="pxs_bg2"></div>
        <div class="pxs_bg3"></div>
    </div>
    <div class="pxs_slider_wrapper">
        <ul class="pxs_slider">
            <li><img src="images/ParallaxScrolling/big1.jpg" alt="First Image" /></li>
            <li><img src="images/ParallaxScrolling/big2.jpg" alt="Second Image" /></li>
            <li><img src="images/ParallaxScrolling/big3.jpg" alt="Third Image" /></li>
            <li><img src="images/ParallaxScrolling/big4.jpg" alt="Forth Image" /></li>
            <li><img src="images/ParallaxScrolling/big5.jpg" alt="Fifth Image" /></li>
            <li><img src="images/ParallaxScrolling/big6.jpg" alt="Sixth Image" /></li>
        </ul>
        <div class="pxs_navigation">
            <span class="pxs_next"></span>
            <span class="pxs_prev"></span>
        </div>

        <ul class="pxs_thumbnails">
            <li><img src="images/ParallaxScrolling/sm1.jpg" alt="First Image" /></li>
            <li><img src="images/ParallaxScrolling/sm2.jpg" alt="Second Image" /></li>
            <li><img src="images/ParallaxScrolling/sm3.jpg" alt="Third Image" /></li>
            <li><img src="images/ParallaxScrolling/sm4.jpg" alt="Forth Image" /></li>
            <li><img src="images/ParallaxScrolling/sm5.jpg" alt="Fifth Image" /></li>
            <li><img src="images/ParallaxScrolling/sm6.jpg" alt="Sixth Image" /></li>
        </ul>
    </div>
 </div>

 /*
 视差滚动
 */

function oParallaxScrolling(){
    
    var oPS=document.getElementById("pxs_container");
    var oPSAll=getByClass(oPS,"pxs_slider_wrapper")[0];

    //背景
    var bg1=getByClass(oPS,"pxs_bg1")[0];
    var bg2=getByClass(oPS,"pxs_bg2")[0];
    var bg3=getByClass(oPS,"pxs_bg3")[0];

    //大图片
    var bigP=getByClass(oPS,"pxs_slider")[0];
    var bigPLi=bigP.getElementsByTagName("li");
    var bigPImg=bigP.getElementsByTagName("img");

    //小图片
    var smallP=getByClass(oPS,"pxs_thumbnails")[0];
    var smallPLi=smallP.getElementsByTagName("li");
    var smallPImg=smallP.getElementsByTagName("img");

    //左右按钮
    var pre=getByClass(oPS,"pxs_prev")[0];
    var nex=getByClass(oPS,"pxs_next")[0];


    //获取浏览器窗口的宽高
    var ww=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var wh=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    var L=bigPLi.length;  //图片的个数
    setStyle(bigP, 'width', L*ww + 'px');

    //将窗口设置为可见的
    oPSAll.style.display='block';
    //浏览器的尺寸小于768，隐藏该模块
   /* if(ww<768){
        oPS.style.display='none';
    }*/

    //初始化大图位置
    for(var i=0; i<L; i++){
        setStyle(bigPLi[i], 'width', ww + 'px');
        setStyle(bigPImg[i], 'left', ww/2 - bigPImg[i].offsetWidth/2 + 'px');
    }

    //初始化左右按钮位置
    setStyle(pre, 'left', ww/2 - bigPImg[0].offsetWidth/2 - 10 + 'px');
    setStyle(nex, 'left', ww/2 - bigPImg[0].offsetWidth/2 + bigPImg[0].offsetWidth - 20 + 'px');

    //初始化小图位置
    setStyle(smallP,'width',bigPImg[0].offsetWidth + 'px');
    setStyle(smallP,'left', ww/2 - bigPImg[0].offsetWidth/2 + 'px');

    var angle ;
    for(var i=0; i<L; i++){
        setStyle(smallPLi[i], 'left', smallPLi[i].offsetWidth * i + (bigPImg[0].offsetWidth - L*smallPLi[0].offsetWidth -80)/2 + 80/L*i +  'px');
        angle = Math.random()*60 - 30;
        setStyle(smallPImg[i],'transform','rotate(' + angle + 'deg)');
    }



    //效果
    var now = 0; //记录照片的播放次序
    //大图、小图、背景在切换时的变化行为
    function imageTab(){
        /*
         速度：大图  > 背景3  > 背景2 > 背景1，实现视差滚动
         背景图的运动，通过控制目标值来控制速度。
         注意，这里一定要加Math.floor()，即目标值为整数，这样才不会出现抖动。
         */
        startmove(bigP , {left: -now*ww} );
        startmove(bg3 , {left: -now * Math.floor(bg3.offsetWidth/8) } );
        startmove(bg2 , {left: -now * Math.floor(bg2.offsetWidth/10)} );
        startmove(bg1 , {left: -now * Math.floor(bg1.offsetWidth/12) } );
        //小图随大图走
        for(var j=0; j<L ;j++){
            startmove( smallPLi[j] , {opacity:70 , marginTop:0} );
        }
        startmove( smallPLi[now] , {opacity:100 , marginTop:-20} );
    };


    for(var i=0; i<L; i++){
        smallPLi[i].index = i;

        //小图移入、移除、点击效果
        smallPLi[i].onmouseover = function(){
            startmove( smallPLi[this.index] , {opacity:100 , marginTop:-20} );
        };
        smallPLi[i].onmouseout = function(){
            startmove( smallPLi[this.index] , {opacity:70 , marginTop:0} );
        };
        smallPLi[i].onclick = function(){
            now = this.index;
            imageTab();
        };
        //左按钮
        pre.onclick = function(){
            now--;
            if(now == -1){
                now = 0;     //防止左边出界
                return;
            }
            imageTab();
        };
        //右按钮
        nex.onclick = function(){
            now++;
            if(now == 6){
                now = 5;    //防止右边出界
                return;
            }
            imageTab();
        };
    }

    //自动播放
    function autoPlay(){
        if(now == 5){
            now = -1;    //自动播放时，右边最后一个运动完切换到第一个
        }
        now++;
        imageTab();
    };
    var timer = setInterval( autoPlay , 5000);
    oPS.onmouseover = function(){
        clearInterval(timer);
    };
    oPS.onmouseout = function (){
        timer = setInterval( autoPlay , 5000);
    };

};

oParallaxScrolling();