我是javascript的新手,我正在尝试创建一个水平滚动div: -
你可以看到菜单链接转到每种颜色,但我想把它放在一个250x250px的容器内,所以只有1种颜色可见,然后你点击任何一个链接,它滚动到那种颜色.
希望有人可以帮我指点几点.
谢谢!
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollLeft: $(this.hash).offset().left
}, 200);
});
});.container {
white-space: nowrap;
}
.child-element {
min-width: 250px;
display: inline-block;
height: 250px;
}
.child1 {
background-color: purple;
}
.child2 {
background-color: orange;
}
.child3 {
background-color: black;
}
.child4 {
background-color: green;
}
.child5 {
background-color: blue;
}
.child6 {
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#purple" class="scroll">PURPLE</a>
<a href="#orange" class="scroll">ORANGE</a>
<a href="#black" class="scroll">BLACK</a>
<a href="#green" class="scroll">GREEN</a>
<a href="#blue" …