0

我想创建一个 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);

4

2 回答 2

0
<!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

于 2013-09-20T03:31:47.847 回答
0

您可以使用可用于滚动 jQuery scrollto的 jquery 插件

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

于 2013-09-21T10:04:21.693 回答