我有jQuery代码正在工作:
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos < 10 ) {
$("div").css('width', 75);
} else if(scroll_pos > 25 && scroll_pos < 75) {
$("div").css('width', 100);
} else if(scroll_pos > 75 && scroll_pos < 100){
$("div").css('width', 125);
}else if(scroll_pos > 100){
$("div").css('width', 150);
}
});
});
以及一个宽度:75px 的div 元素。
当用户向下滚动潜水元素时,使用该代码分四个步骤将宽度从 75px 更改为 150px,但我正在寻找可以在没有步骤的情况下将该宽度从 75px 平滑更改为 150px 的东西,知道吗?
也许这个解决方案就是你试图得到的:
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if (scroll_pos > 150) {
scroll_pos = 150;
};
$("div").animate({
width : (75+0.75*scroll_pos)+"px"
});
});
});
你可能正在jQuery中寻找.animate()。只需使用动画在滚动时更改div 的大小即可。
$(document).ready(function(){
$(document).scroll(function() {
$("div").animate({
width : "150px"
});
});
});
对于滚动宽度的连续增量,请尝试这种方式。这会将每个滚动轴上的div 宽度增加 30px,并增加直到达到 150px。
$(document).ready(function(){
$(document).scroll(function() {
if($("div").width() <= "150"){
$("div").animate({
width : "+=30"
});
}
});
});
js小提琴
参考文献 : .scroll() , .animate()