0

我一直在环顾四周，我想我已经很接近了，但是当我移动滑块来改变动画的速度时，似乎什么也没有发生。我假设这与已经在进行的动画有关？这是我到目前为止的代码：

<html>
<head>
<script src="jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">

function pageScroll(speed)
{
    $("html, body").animate({ scrollTop: $(document).height() }, speed);    
}
</script>
</head>
<body>
<body onLoad="pageScroll(100000);">

<input onChange="pageScroll(this.value);" type="range" value="100000" name="slider" min="0" max="200000"  style="position:fixed; left:0;top:0">

<center><img src="page-0.jpg" width="800">
<img src="page-1.jpg" width="800">
<img src="page-2.jpg" width="800">
<img src="page-3.jpg" width="800"></center>

</body>
</html>
4

2 回答 2

0

你可以这样做：

http://jsfiddle.net/ASMITH/AECva/

<input id="slider" type="range" value="10000" name="slider" min="100" max="20000"     style="position:fixed; left:0;top:0"></input>

$(document).ready(function () {
var vHeight = $('body').height();
$('#slider').change(function () {
    var speed = $('#slider').val();
    $('body').stop().animate({
        scrollTop: vHeight
    }, +speed);
});

});

于 2013-06-06T21:49:59.350 回答
0

请删除您的代码的这些部分<body onLoad="pageScroll(100000);">

而且你的代码中有 2 个身体标签......这不好......

如果你想做一些事情，当你的页面被加载时，然后在 JS 中借助 jQuery 来做 ->

$(function() {
    /* things to do, after the page is loaded */
    pageScroll(100000);
});

要更改动画，请使用 .stop()。它会破坏队列中的所有动画。有关更多信息，请阅读API 文档

function pageScroll(speed) {
    $("html,body").stop().animate({ scrollTop: 119}, 500 );
}

而且我不确定，但我认为这个选择器有一些问题......如果它不起作用，试试这个选择器：

$("html:not(:animated),body:not(:animated)")
于 2013-06-06T21:07:04.003 回答