javascript - 如何使用嵌入式功能(Pete 的 One Scroll Page - peachananr)

标签 javascript jquery html css

最近我正在使用这个很棒的插件开发一个页面:

https://github.com/peachananr/onepage-scroll

但是我不熟悉 JavaScript,所以如果有人能向我解释几件事,我将不胜感激:

  1. 我想将单滚动页面行为与 anchor 滚动相结合,简单示例:

    function scrollContent(id) { $('html, body').animate({ scrollTop: $('#' + id).offset().top }, 1000 ); }

据我所知,有一个名为“$.fn.moveTo(page_index)”的嵌入式函数(请参阅插件链接),但我无法成功使用它。

  1. 我想在离开第 1 页时转动 slider 以节省资源, slider 启动功能:

$('#da-slider').cslider({ autoplay : true, interval : 8000, });

试图通过打乱回调来简单地关闭自动播放,但结果证明这是一个糟糕的解决方案:

$(".main").onepage_scroll({ sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in", // "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)" animationTime: 1000, // AnimationTime let you define how long each section takes to animate pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide. updateURL: true, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page. beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves. afterMove: function(#1) { $('#da-slider').cslider({ autoplay : off, interval : 8000, }); }, // This option accepts a callback function. The function will be called after the page moves. loop: true, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page. keyboard: true, // You can activate the keyboard controls responsiveFallback: 600, // You can fallback to normal page scroll by defining the width of the browser in which // you want the responsive fallback to be triggered. For example, set this to 600 and whenever // the browser's width is less than 600, the fallback will kick in. direction: "horizontal" // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".<br/> });

每个提示,甚至是指向 jquery 教程的链接都会非常有帮助。提前致谢!

最佳答案

找到的解决方案:

$("#your-div-id").on("click", function(){$(".main").moveTo(2);});

关于javascript - 如何使用嵌入式功能(Pete 的 One Scroll Page - peachananr),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25150883/

相关文章:

javascript - 使用顺序 for 循环遍历关联数组

javascript - 下拉回发

video - HTML5 <video>播放支持.avi格式吗?

javascript - div 复选框在单击时变暗

Javascript:使矩形向上增长

javascript - 如何缩放 JavaScript 类

javascript - 上传前的 AngularJS 图像预览显示所选的上一张图像

javascript - d3.js饼图时钟

jquery - 当多个事件处理程序绑定(bind)到一个元素时的优先级

javascript - 发生事情时调用 jQuery