1

我正在尝试制作一个简单的水平滑块。

就目前而言，我在一行中有三个相同大小的 div。我确实有 jQuery 来移动它们，但目前视口会随着它们一起移动，或者什么也没有发生。谁能指出我的方向，以便视口保持固定并且内容滑过它？这是到目前为止的代码......

<!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>Slider (cutdown, demo)</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#trigger1').click(function(){
$(".box").animate({left: "0"});
});
$('#trigger2').click(function(){
$("#viewport").animate({left: "-200"});
});
$('#trigger3').click(function(){
$(".box").animate({left: "-400"});
});
});
</script>
<style>
body    {
background:#003;
color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#viewport   {
width:200px;
height:200px;
overflow:hidden;
}
.box    {
background-color:#069;
border-style:solid;
border-width:2px;
width:196px;
height:196px;
float:left;
}
</style>
</head>

<body>
<div id="trigger1">
Trigger One
</div>
<div id="trigger2">
Trigger Two
</div>
<div id="trigger3">
Trigger Three
</div>
<div id="viewport">
<div id="container">
<div id="box1" class="box">
Box One
</div>
<div id="box2" class="box">
Box Two
</div>
<div id="box3" class="box">
Box Three
</div>
</div>
</div>
</body>
</html>
4

2 回答 2

1

给你的 .box 类一个位置属性。推荐亲戚。然后给你的容器一个宽度，比如 600px;。触发器 1 和 3 现在似乎工作正常。

jsFiddle 示例

于 2012-07-11T20:39:04.320 回答
0

我建议您重组触发菜单并像这样重写您的 JQuery 代码：

HTML

<ul id="triggerMenu">
    <li id="trigger-0">One</li>
    <li id="trigger-1">Two</li>
    <li id="trigger-2">Three</li>
</ul>

<div id="viewport">
    <div id="container">
        <div id="box1" class="box">Box One</div>
        <div id="box2" class="box">Box Two</div>
        <div id="box3" class="box">Box Three</div>
    </div>
</div>​

jQuery

$("li", "#triggerMenu").on("click", function()
{
    var triggerNumber = $(this).attr("id").replace(/(.*)-/,"");
    var newPosition = triggerNumber * 200;

    // Make sure the box slides in the right direction
    if (newPosition > 0) newPosition = "-" + newPosition;

    // Slide box
    $(".box").animate({left: newPosition});
});

这样您就不必为每个触发器/框组合添加新的 JQuery 代码。

现场演示：http: //jsfiddle.net/fAWpZ/5/

于 2012-07-11T21:07:07.770 回答