制作滑块，无法创建视口
Posted
技术标签:
【中文标题】制作滑块，无法创建视口【英文标题】：Making a slider, can't create viewport 【发布时间】：2012-07-11 13:27:28 【问题描述】：我正在尝试制作一个简单的水平滑块。
就目前而言，我在一行中有三个大小相同的 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>
【问题讨论】：
【参考方案1】：给你的 .box 类一个位置属性。推荐亲戚。然后给你的容器一个宽度，比如 600px;。触发器 1 和 3 现在似乎可以正常工作了。
jsFiddle example
【讨论】：
已更新 jsfiddle.net/fAWpZ/3 - 第二个按钮不起作用，因为您使用 #viewport 而不是 .box 作为动画元素；) @Tom - 很好的更新。我认为 OP 有这种方式是有原因的，但看到它在行动中更有意义的是.box。
汤姆，j-谢谢。这是一个精简版，所以我不必发布大量代码。它确实应该读到.box - 很好发现。【参考方案2】：
我建议你重组你的触发菜单并像这样重写你的 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/
【讨论】：
以上是关于制作滑块，无法创建视口的主要内容，如果未能解决你的问题，请参考以下文章