我想通过更改所选项目的位置来创建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);
<!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
您可以使用可用于滚动jQuery scrollto的jquery插件>
它也具有动画滚动选项