不知道我做错了什么，当我按下按钮时，我希望这个 DIV 的内容水平滚动。从这里得到了很多代码，但现在我陷入困境......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Naamloos document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
#browser { float: left; width: 400px; overflow: auto; white-space: nowrap; }
</style>
</head>
<body>
<input type="button" class="leftArrow" value="left">
这是应该滚动的 DIV
<div id="browser">
<div class="innerWrapper">
<div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0FC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#3CF; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0FC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#3CF; width:200px; height:200px; display:inline-block"></div>
</div>
</div>
<input type="button" class="rightArrow" value="right">
我不确定是否应该将脚本放在这里
<!--
<script>
$('#right-button').click(function() {
var leftPos = $('#content').scrollLeft();
$('#content').animate({scrollLeft: leftPos - 200}, 800);
});
$('#left-button').click(function() {
var leftPos = $('#content').scrollLeft();
$('#content').animate({scrollLeft: leftPos + 200}, 800);
});
</script>
-->
</body>
</html>
链接到 DEMO
最佳答案
我成功了。下面是新的标记和脚本。
您遇到的一些问题:
- jQuery 脚本未包装在“文档就绪”处理程序中。
- 您的类和 ID 之间存在各种不匹配的命名问题。
希望这有帮助(在本地测试过):
<div id="outer">
<div id="inner">
<div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0FC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#3CF; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0FC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#3CF; width:200px; height:200px; display:inline-block"></div>
</div>
</div>
<input type="button" id="left-button" class="leftArrow" value="left">
<input type="button" id="right-button" class="rightArrow" value="right">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(function () {
var outer = $('#outer');
$('#right-button').click(function () {
var leftPos = outer.scrollLeft();
outer.animate({ scrollLeft: leftPos - 200 }, 800);
});
$('#left-button').click(function () {
var leftPos = outer.scrollLeft();
outer.animate({ scrollLeft: leftPos + 200 }, 800);
});
});
</script>
并稍微重命名样式:
<style>
#outer {
float: left;
width: 400px;
overflow: auto;
white-space: nowrap;
}
</style>
关于javascript - 带按钮的水平滚动 DIV，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24181253/