使用滚动条编写插件进行动画处理

问题描述 投票:0回答:2

我想通过更改所选项目的位置来创建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);

javascript jquery function jquery-plugins scrollbar
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()的jquery知识库中引用的;

而且,这可能会也可能不会有所帮助,但是另一个使用HTML和CSS的工作示例:http://lab.stephaneguigne.com/js/jquery-scrollsections/example/callbacks.html


0
投票

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

它也具有动画滚动选项

© www.soinside.com 2019 - 2024. All rights reserved.