悬停/滚动时具有不同速度的4列

时间：2018-05-23 10:06:29

标签： javascript jquery

我试图制作一个很酷的画廊剧本，几乎就像这个“http://phosphenefx.com/credits”。

我在web / stackoverflow上阅读了很多关于这个主题的内容，但是我的代码没有完全成功。

我试过两个approch，一个用jquery / animate，另一个用JSfiddle找到的脚本

动画版： 

    <!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">


<style>


.col-one, 
.col-two,
.col-three,
.col-four
 {
    position: relative;
    float: left;
    padding-left: 0px;
    box-sizing: border-box;
}

.col-one {
    width: 500px;
    padding: 0;
}

.col-two {
    width: 250px;
    padding: 0;
}

.col-three {
    width: 125px;
    padding: 0;
}
.col-four {
    width: 62.5px;
    padding: 0;
}

.col-two img,
.col-one img,
.col-three img,
.col-four img,

 {
    width: auto;
    max-width: 100%;
}

</style>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){


    $('#one').hover(function(){

        var iScrollPos = 0;
        $(window).scroll(function () {

            var iCurScrollPos = $(this).scrollTop();

            var a = iCurScrollPos-iScrollPos;

            if (iCurScrollPos > iScrollPos) {

                //Scrolling Down
                //$('#one').scroll(function(){
                console.log(iCurScrollPos-iScrollPos);
                $( "#two" ).clearQueue();
                $( "#two" ).stop();             
                $( "#three" ).clearQueue();
                $( "#three" ).stop();               
                $( "#four" ).clearQueue();
                $( "#four" ).stop();

                $( "#two" ).animate({ "top": "-="+a+"px" }, {duration: 2000, easing: "linear" } );
                $( "#three" ).animate({ "top": "-="+a+"px" }, {duration: 1000, easing: "linear" } );
                $( "#four" ).animate({ "top": "-="+a+"px" }, {duration: 500, easing: "linear" } );


                //});

            } else {
                console.log(a);
                $( "#two" ).clearQueue();
                $( "#two" ).stop();             
                $( "#three" ).clearQueue();
                $( "#three" ).stop();               
                $( "#four" ).clearQueue();
                $( "#four" ).stop();

                $( "#two" ).animate({ "top": "-="+a+"px" }, {duration: 2000, easing: "linear" } );
                $( "#three" ).animate({ "top": "-="+a+"px" }, {duration: 1000, easing: "linear" } );
                $( "#four" ).animate({ "top": "-="+a+"px" }, {duration: 500, easing: "linear" } );



            }

            iScrollPos = iCurScrollPos;

        });

    });

    //////////////////////////////////////////
    //////////////////////////////////////////
    //////////////////////////////////////////
    $('#two').hover(function(){

        var iScrollPos = 0;
        $(window).scroll(function () {

            var iCurScrollPos = $(this).scrollTop();

            var a = iCurScrollPos-iScrollPos;

            if (iCurScrollPos > iScrollPos) {

                //Scrolling Down
                //$('#one').scroll(function(){
                console.log(iCurScrollPos-iScrollPos);
                $( "#one" ).clearQueue();
                $( "#one" ).stop();             
                $( "#three" ).clearQueue();
                $( "#three" ).stop();               
                $( "#four" ).clearQueue();
                $( "#four" ).stop();

                $( "#one" ).animate({ "top": "-="+a+"px" }, {duration: 2000, easing: "linear" } );
                $( "#three" ).animate({ "top": "-="+a+"px" }, {duration: 1000, easing: "linear" } );
                $( "#four" ).animate({ "top": "-="+a+"px" }, {duration: 500, easing: "linear" } );


                //});

            } else {
                console.log(a);
                $( "#one" ).clearQueue();
                $( "#one" ).stop();             
                $( "#three" ).clearQueue();
                $( "#three" ).stop();               
                $( "#four" ).clearQueue();
                $( "#four" ).stop();

                $( "#one" ).animate({ "top": "-="+a+"px" }, {duration: 2000, easing: "linear" } );
                $( "#three" ).animate({ "top": "-="+a+"px" }, {duration: 1000, easing: "linear" } );
                $( "#four" ).animate({ "top": "-="+a+"px" }, {duration: 500, easing: "linear" } );



            }

            iScrollPos = iCurScrollPos;

        });

    }); 


    //////////////////////////////////////////
    //////////////////////////////////////////
    //////////////////////////////////////////
    $('#three').hover(function(){

        var iScrollPos = 0;
        $(window).scroll(function () {

            var iCurScrollPos = $(this).scrollTop();

            var a = iCurScrollPos-iScrollPos;

            if (iCurScrollPos > iScrollPos) {

                //Scrolling Down
                //$('#one').scroll(function(){
                console.log(iCurScrollPos-iScrollPos);
                $( "#one" ).clearQueue();
                $( "#one" ).stop();             
                $( "#two" ).clearQueue();
                $( "#two" ).stop();             
                $( "#four" ).clearQueue();
                $( "#four" ).stop();

                $( "#one" ).animate({ "top": "-="+a+"px" }, {duration: 2000, easing: "linear" } );
                $( "#two" ).animate({ "top": "-="+a+"px" }, {duration: 1000, easing: "linear" } );
                $( "#four" ).animate({ "top": "-="+a+"px" }, {duration: 500, easing: "linear" } );


                //});

            } else {
                console.log(a);
                $( "#one" ).clearQueue();
                $( "#one" ).stop();             
                $( "#two" ).clearQueue();
                $( "#two" ).stop();             
                $( "#four" ).clearQueue();
                $( "#four" ).stop();

                $( "#one" ).animate({ "top": "-="+a+"px" }, {duration: 2000, easing: "linear" } );
                $( "#two" ).animate({ "top": "-="+a+"px" }, {duration: 1000, easing: "linear" } );
                $( "#four" ).animate({ "top": "-="+a+"px" }, {duration: 500, easing: "linear" } );



            }

            iScrollPos = iCurScrollPos;

        });

    }); 




    //////////////////////////////////////////
    //////////////////////////////////////////
    //////////////////////////////////////////
    $('#three').hover(function(){

        var iScrollPos = 0;
        $(window).scroll(function () {

            var iCurScrollPos = $(this).scrollTop();

            var a = iCurScrollPos-iScrollPos;

            if (iCurScrollPos > iScrollPos) {


                console.log(iCurScrollPos-iScrollPos);
                $( "#one" ).clearQueue();
                $( "#one" ).stop();             
                $( "#two" ).clearQueue();
                $( "#two" ).stop();             
                $( "#three" ).clearQueue();
                $( "#three" ).stop();

                $( "#one" ).animate({ "top": "-="+a+"px" }, {duration: 2000, easing: "linear" } );
                $( "#two" ).animate({ "top": "-="+a+"px" }, {duration: 1000, easing: "linear" } );
                $( "#three" ).animate({ "top": "-="+a+"px" }, {duration: 500, easing: "linear" } );




            } else {
                console.log(a);
                $( "#one" ).clearQueue();
                $( "#one" ).stop();             
                $( "#two" ).clearQueue();
                $( "#two" ).stop();             
                $( "#three" ).clearQueue();
                $( "#three" ).stop();

                $( "#one" ).animate({ "top": "-="+a+"px" }, {duration: 2000, easing: "linear" } );
                $( "#two" ).animate({ "top": "-="+a+"px" }, {duration: 1000, easing: "linear" } );
                $( "#three" ).animate({ "top": "-="+a+"px" }, {duration: 500, easing: "linear" } );



            }

            iScrollPos = iCurScrollPos;

        });

    }); 




});
</script>


</head>
<body>
<div class="page"> 

<div id="columns" class="clearfix">

<div id="one" class="col-one">
<img src="img/col1/1.png" /><br>
<img src="img/col1/2.png" /><br>                
<img src="img/col1/1.png" /><br>
<img src="img/col1/2.png" />
</div> 

<div id="two" class="col-two">
<img src="img/col2/1.png" /><br>
<img src="img/col2/2.png" /><br>
<img src="img/col2/3.png" /><br>
<img src="img/col2/4.png" /><br>                
<img src="img/col2/1.png" /><br>
<img src="img/col2/2.png" /><br>
<img src="img/col2/3.png" /><br>
<img src="img/col2/4.png" />
</div> 
<div class="col-three" id="three" >
<img src="img/col3/1.png" /><br>
<img src="img/col3/2.png" /><br>
<img src="img/col3/3.png" /><br>
<img src="img/col3/4.png" /><br>
<img src="img/col3/5.png" /><br>
<img src="img/col3/6.png" /><br>
<img src="img/col3/7.png" /><br>
<img src="img/col3/8.png" /><br>            
<img src="img/col3/1.png" /><br>
<img src="img/col3/2.png" /><br>
<img src="img/col3/3.png" /><br>
<img src="img/col3/4.png" /><br>
<img src="img/col3/5.png" /><br>
<img src="img/col3/6.png" /><br>
<img src="img/col3/7.png" /><br>
<img src="img/col3/8.png" />
</div>
<div class="col-four" id="four" >
<img src="img/col4/1.png" /><br>
<img src="img/col4/2.png" /><br>
<img src="img/col4/3.png" /><br>
<img src="img/col4/4.png" /><br>
<img src="img/col4/5.png" /><br>
<img src="img/col4/6.png" /><br>
<img src="img/col4/7.png" /><br>
<img src="img/col4/8.png" /><br>
<img src="img/col4/9.png" /><br>
<img src="img/col4/10.png" /><br>
<img src="img/col4/11.png" /><br>
<img src="img/col4/12.png" /><br>
<img src="img/col4/13.png" /><br>
<img src="img/col4/14.png" /><br>
<img src="img/col4/15.png" /><br>
<img src="img/col4/16.png" /><br>   
<img src="img/col4/1.png" /><br>
<img src="img/col4/2.png" /><br>
<img src="img/col4/3.png" /><br>
<img src="img/col4/4.png" /><br>
<img src="img/col4/5.png" /><br>
<img src="img/col4/6.png" /><br>
<img src="img/col4/7.png" /><br>
<img src="img/col4/8.png" /><br>
<img src="img/col4/9.png" /><br>
<img src="img/col4/10.png" /><br>
<img src="img/col4/11.png" /><br>
<img src="img/col4/12.png" /><br>
<img src="img/col4/13.png" /><br>
<img src="img/col4/14.png" /><br>
<img src="img/col4/15.png" /><br>
<img src="img/col4/16.png" />   

</div>

</div> <!-- #columns -->

</div>



</body>
</html>

另一个版本基于“https://jsfiddle.net/dony190h/1/”

<html>
<head>
<meta charset="utf-8">
<script  src="https://code.jquery.com/jquery-2.1.3.min.js" integrity="sha256-ivk71nXhz9nsyFDoYoGf2sbjrR9ddh+XDkCcfZxjvcM="  crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="css/bootstrap.css"> -->
<style> 
body {
background:red;
margin:0;
padding:0;

}

img {
margin:0;
padding:0;
}


.container img {
height: auto;
display: block;
position:relative; 
max-width: 100%; 
min-height:auto; 
transition: 0.5s ease;}

.column {
position: relative;
top: 0;
height:1000px;
float: left;
padding: 0;
}

.column {
height:1000px;
float: left;
overflow:hidden
}
</style>
<script>
$(document).ready(function() {




  // Setup some vars on start
  // you can define more speeds here
  var speeds = {
    'veryslow': 0.2,
    'slow': 0.5,
    'fast': 1,
    'veryfast': 2
  };

  var noColumns = $('.column').length;
  // this contains column properties to be used later
  var columns = new Array();

  initColSpeed();




  for (var i = 0; i < noColumns; i++) {
    columns.push({
      columnHeight: parseInt($('.column').eq(i).css('height')),
      position: 0,
      speed: speeds[$('.column').eq(i).attr('data-speed')]
    });
  }
  var previousScroll = $(this).scrollTop();
  var conHeight = parseInt($('.column').eq(0).css('height')) * 2;


  // We need to extend main div, to have scrolling bar active for all elements in column
 // $('.tall').css('height', conHeight + 'px');

 $(window).on('scroll', function(event) {
    // Do the magic
    var shift = $(this).scrollTop() - previousScroll;
    previousScroll = $(this).scrollTop();

    for (var i = 0; i < noColumns; i++) {
      columns[i].position -= shift * columns[i].speed;
      $('.column').eq(i).css('top', columns[i].position + 'px');
    }
  });


  function initColSpeed(){
    $('#col1').hover(function(){
        $(this).attr('data-speed','veryfast');
        $('#col2').attr('data-speed','fast');
        $('#col3').attr('data-speed','slow');
        $('#col4').attr('data-speed','veryslow');
    });
    $('#col2').hover(function(){
        $('#col1').attr('data-speed','fast');
        $(this).attr('data-speed','veryfast');
        $('#col3').attr('data-speed','slow');
        $('#col4').attr('data-speed','veryslow');

    });
    $('#col3').hover(function(){
        $('#col1').attr('data-speed','veryslow');
        $('#col2').attr('data-speed','fast');
        $(this).attr('data-speed','veryfast');
        $('#col4').attr('data-speed','slow');
    });
    $('#col4').hover(function(){
        $('#col1').attr('data-speed','slow');
        $('#col2').attr('data-speed','veryslow');
        $('#col3').attr('data-speed','fast');
        $(this).attr('data-speed','veryfast');
    }); 
}


});
</script>
</head>
<body>

<div class="container">
    <div class="column col-md-1" id="col1" data-speed="">
        <img src="img/col1/1.png" />
        <img src="img/col1/2.png" />        
        <img src="img/col1/1.png" />
        <img src="img/col1/2.png" />
    </div>
    <div class="column col-md-2" id="col2" data-speed="">
        <img src="img/col2/1.png" />
        <img src="img/col2/2.png" />
        <img src="img/col2/3.png" />
        <img src="img/col2/4.png" />        
        <img src="img/col2/1.png" />
        <img src="img/col2/2.png" />
        <img src="img/col2/3.png" />
        <img src="img/col2/4.png" />
    </div>
    <div class="column col-md-3" id="col3" data-speed="">
        <img src="img/col3/1.png" />
        <img src="img/col3/2.png" />
        <img src="img/col3/3.png" />
        <img src="img/col3/4.png" />
        <img src="img/col3/5.png" />
        <img src="img/col3/6.png" />
        <img src="img/col3/7.png" />
        <img src="img/col3/8.png" />        
        <img src="img/col3/1.png" />
        <img src="img/col3/2.png" />
        <img src="img/col3/3.png" />
        <img src="img/col3/4.png" />
        <img src="img/col3/5.png" />
        <img src="img/col3/6.png" />
        <img src="img/col3/7.png" />
        <img src="img/col3/8.png" />
    </div>
    <div class="column col-md-4" id="col4" data-speed="">
        <img src="img/col4/1.png" />
        <img src="img/col4/2.png" />
        <img src="img/col4/3.png" />
        <img src="img/col4/4.png" />
        <img src="img/col4/5.png" />
        <img src="img/col4/6.png" />
        <img src="img/col4/7.png" />
        <img src="img/col4/8.png" />
        <img src="img/col4/9.png" />
        <img src="img/col4/10.png" />
        <img src="img/col4/11.png" />
        <img src="img/col4/12.png" />
        <img src="img/col4/13.png" />
        <img src="img/col4/14.png" />
        <img src="img/col4/15.png" />
        <img src="img/col4/16.png" />       
        <img src="img/col4/1.png" />
        <img src="img/col4/2.png" />
        <img src="img/col4/3.png" />
        <img src="img/col4/4.png" />
        <img src="img/col4/5.png" />
        <img src="img/col4/6.png" />
        <img src="img/col4/7.png" />
        <img src="img/col4/8.png" />
        <img src="img/col4/9.png" />
        <img src="img/col4/10.png" />
        <img src="img/col4/11.png" />
        <img src="img/col4/12.png" />
        <img src="img/col4/13.png" />
        <img src="img/col4/14.png" />
        <img src="img/col4/15.png" />
        <img src="img/col4/16.png" />   

    </div>
</div>
</div>


</body>
</html>

但是在每个版本上我都没有在悬停时获得速度滚动并且在其他div上平滑滚动。

欢迎任何建议，谢谢提前

0 个答案:

没有答案
相关问题
最新问题