Question

我想创建一个使用滚动条动画元素的JQuery插件我需要使用滚动条

更改所选项目的位置

我需要这样的东西：

$("#obj").scrollate(200,400,"left:100","left:400");

然后我需要在每个函数上访问.scroll函数？ !!!

我认为这段代码不起作用，因为无法单独为每个瞬间声明.scroll函数！

(function ($) {
$.fn.scrollate = function (start,end) {

//Some code

    $(window).scroll(function () {
        var spos = $(window).scrollTop();
        if (spos > start && spos < end) {
            var progress = (1 / (end - start)) * (spos - start);

            // changing css using progress
        }
    }
})

}）（JQuery的）;

Answer 1

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scroll demo</title>
<style>
div {
color: blue;
}
p {
color: green;
}
span {
color: red;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div>Try scrolling the iframe.</div>
<p>Paragraph - <span>Scroll happened!</span></p>
<script>
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( window ).scroll(function() {
$( "span" ).css( "display", "inline" ).fadeOut( "slow" );
});
</script>
</body>
</html>

试一试。它来自.scroll()的jquerys知识库;

此外 - 这可能会或可能没有帮助，但另一个工作示例与一些HTML和CSS： http://lab.stephaneguigne.com/js/jquery-scrollsections/example/callbacks.html

Answer 2

您可以使用可用于滚动jQuery scrollto

的jquery插件

它也有动画滚动动画的选项

使用滚动条将插件编写为动画

2 个答案: