带有HTML滑块的jQuery自动页面滚动可控制动画速度
[英]jQuery Automatic page scroll with HTML slider to control animation speed
问题描述
我一直在环顾四周，我想我已经很接近了，但是当我移动滑块以更改动画速度时，似乎什么也没有发生。 我假设这与正在进行的动画有关吗？ 到目前为止，这是我的代码：
<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>
2 个解决方案
解决方案1
0 2013-06-06 21:07:04
请删除代码的这些部分<body onLoad="pageScroll(100000);">
而且您的代码中有2个body标记...不好...
如果您想做某事，请在页面加载后在jQuery的帮助下使用JS->
$(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)")
解决方案2
0 2013-06-06 21:49:59
您可以执行以下操作：
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);
});
}）;
通过jQuery UI滑块控制html5 canvas动画速度
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.