Javascript 如何在Jinvert卷轴上设置总高度_Javascript_Jquery_Html

Javascript 如何在Jinvert卷轴上设置总高度

javascript jquery html

Javascript 如何在Jinvert卷轴上设置总高度,javascript,jquery,html,Javascript,Jquery,Html,我使用名为Jinvertscroll的Jquery插件创建了一个带有视差的水平滚动网站。但是，滚动在到达页面末尾之前停止。演示在。请告诉我如何更改插件上的总滚动长度 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vip Sitaraman</title> <link rel="stylesheet" href="css

我使用名为Jinvertscroll的Jquery插件创建了一个带有视差的水平滚动网站。但是，滚动在到达页面末尾之前停止。演示在。请告诉我如何更改插件上的总滚动长度

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Vip Sitaraman</title>
    <link rel="stylesheet" href="css/example.css" />
<body style="background-color:#383938">

<div id="main">
<div class="suit scroll">        
      <img id="animation" src="images/1.png"  alt="" />
</div>
<div class="plane scroll">        
      <img class="plane" src="images/plane.png"  alt="" />
</div>
<div class="pinned scroll">
    <a id="navv">< </a><a id="nav"> ></a>

    </div>
<div class="bg scroll">
        <img src="images/bg.jpg" alt="" />
    </div>
    <div class="horizon scroll">
        <img src="images/horizon_01.png" alt="" />
    </div>
    <div class="middle scroll">
        <img src="images/middle_01.png" alt="" />
    </div>
    <div class="front scroll">
        <img src="images/front_01.png" alt="" />
    </div>
    <div class="research scroll" id="research">
    </div>
<div class="music scroll" id="music">
    </div>
    </div>
</div>
</div>
    <script type="text/javascript" src="../libs/jquery.min.js"></script>
    <script type="text/javascript" src="../dist/js/jquery.jInvertScroll.js"></script>
    <script type="text/javascript">
    (function($) {
        $.jInvertScroll(['.scroll'], // an array containing the selector(s) for the elements you want to animate
            {
            height: 3000, // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
            onScroll: function(percent) { //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
                console.log(percent);
            }
        });
    }(jQuery));
    </script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var b = 300
var bodyHeight = $("body").height()-$(window).height();
window.onscroll = function() {
     if($('#animation').attr('src') != 'images/suit.gif'){
        $('#animation').attr('src','images/suit.gif');
    };
};
});//]]>  

</script>



<script type='text/javascript'>//<![CDATA[ 

$(function (){
    var sdegree = 0;
    var orig = 0;
    var z = 1 + Math.random() * 20
    $(window).scroll(function () {
        if (sdegree > -10 && sdegree < 10 && sdegree - orig >= 0) {
            orig = sdegree;
            sdegree = sdegree + 1;
        } else if (sdegree > -10 && sdegree < 10 && sdegree - orig < 0) {
            orig = sdegree;
            sdegree = sdegree - 1;
        } else if (sdegree <= -10) {
            orig = sdegree;
            sdegree = sdegree + 1;
        } else if (sdegree >= 10) {
            orig = sdegree;
            sdegree = sdegree - 1;
        } else {
            orig = sdegree;
        }
        var srotate = "rotate(" + sdegree + "deg)";
        $('.plane').css('z-index','z');
        $(".plane").css({
            transform: srotate
        });
    });
});
//]]>  

</script>

<script type="text/javascript">
    $(function() {
  $("#nav").click(function() {
     $('html,body').animate({  
        scrollTop: $(document).scrollTop()+800
    }, 1000);
    if($('#animation').attr('src') != 'images/suit.gif'){
        $('#animation').attr('src','images/suit.gif');
    }
  });     
 });
</script>

<script type="text/javascript">
    $(function() {
      $("#navv").click(function() {
            $('html,body').animate({
              scrollTop: $(document).scrollTop()-800
            }, 1000);
      });
    });
    </script>
</body>
</html>


锡塔拉曼贵宾酒店
<  >
（函数（$）{
$.jInvertScroll（['.scroll']，//包含要设置动画的元素的选择器的数组
{
高度：3000，//可选：定义用户可以滚动的高度，否则总长度将作为可滚动高度
onScroll:function（percent）{//可选：当用户向下滚动时将调用的回调函数，用于设置页面上其他内容的动画
控制台日志（百分比）；
}
});
}（jQuery））；
//  
//-10&&sdegree<10&&sdegree-orig>=0）{
orig=s梯度；
sdegree=sdegree+1；
}否则如果（sdegree>-10&&sdegree<10&&sdegree-orig<0）{
orig=s梯度；
sdegree=sdegree-1；
}否则如果（sdegree=10）{
orig=s梯度；
sdegree=sdegree-1；
}否则{
orig=s梯度；
}
var srotate=“旋转（“+sdegree+”deg）”；
$（'.plane'）.css（'z-index'，'z'）；
$（“.plane”）.css({
变换：srotate
});
});
});
//]]>  
$（函数（）{
$（“#导航”）。单击（函数（）{
$（'html，body'）。设置动画（{
scrollTop:$（文档）.scrollTop（）+800
}, 1000);
if（$（'#animation'）.attr（'src'）！='images/suit.gif'）{
$（'#animation'）.attr（'src'，'images/suit.gif'）；
}
});     
});
$（函数（）{
$（“#navv”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（文档）.scrollTop（）-800
}, 1000);
});
});

如果您只需要定义尺寸，以下是您需要的：

$.jInvertScroll(['.myScrollableElements'], {
width: 'auto',  // Page width (auto or int value)
height: 'auto', // Page height (the shorter, the faster the scroll)
onScroll: function(percent) {
    // Callback function that will be called each time the user
    // scrolls up or down, useful for animating other parts
    // on the page depending on how far the user has scrolled down
    // values go from 0.0 to 1.0 (with 4 decimals precision)
}
});

您当前的配置是什么？您所说的配置是什么意思。我使用jinvertscroll代码我在你的帖子中没有看到任何代码，我们无法猜测我们需要代码来识别itview源代码的问题：