2017-08-30 263 views
0

我试图使整个网站与滚动触发的所有事件。我只是需要帮助实现这样的效果:jquery滚动垂直/水平

  1. 我有填补所有的视口几个div的一个网站,我希望用户能够向下滚动到一个名为div的,然后当他保持滚动网站停止垂直滚动,但div的内容水平滚动。当它完成后,网站可以再次垂直滚动。

explainations

<body> 

<header> </header> 

<div class="scroll-vertical" id="tile1"></div> 
<div class="scroll-vertical" id="tile2"></div> 
<div class="scroll-vertical" id="tile3"></div> 

<div class="scroll-horizontal" id="tile4"> 
    <div class="horizontal" id="tile5"></div> 
    <div class="horizontal" id="tile5-a"></div> 
    <div class="horizontal" id="tile5-b"></div> 
    <div class="horizontal" id="tile5-c"></div> 
</div> 

<div class="scroll-vertical" id="tile6"></div> 
<div class="scroll-vertical" id="tile7"></div> 
<footer> </footer> 

  • 如何使该网站只能从一个DIV滚动到其他(整版)
  • 我知道有一个jquery插件名为fullpage.js它做得很好,但作为一个st使用插件学习web开发并不是提高技能的最佳方式。

    感谢您的帮助!

    干杯西蒙

    回答

    0

    为什么你会认为? 我怀疑它可以得到比

    $(document).ready(function() { 
        $('#fullpage').fullpage(); 
    }); 
    

    插件的作者很可能也简单得多已经遇到过,考虑和必须解决的一些细节和问题,跨浏览器和不,你有没有有机会思考。

    编辑::动画的div:

    $("#bigasshorizontaldiv").animate({ 
        left: "-=thewidthofoneviewport", 
        }, 5000, function() { 
        // Animation complete. 
    }); 
    
    +0

    是当然的,你是完全正确的,但在这里我的目标也是fuly undurstand它是如何工作的,我是新来webdevelopement和努力学习和使用所有解决我的问题的时间插件并不是实现这一目标的最佳方式。而fullpage.js不是免费的,没有权利,所以对于学生来说这是一个问题。 –

    +0

    我完全同意。我想让你知道一个“更简单的方法”是相当长的一段时间,以避免错误的期望。 – deg

    +0

    不要担心,也许我应该改变这一点,英语不是我的母语,所以有时候我可能不会使用最合适的词。我会改变它,所以它更容易理解。 –