我希望我自己知道如何写这个。 http://www.cubancouncil.com/work/project/coppola-winery/
链接页面具有我想要使用的确切功能。我如何相信他们的剧本有效。单击一个图像，通过将其向右滑动来隐藏该图像的容器 div，然后从右向左加载/滑动位于固定位置的较大图像。
如果这里有人非常友好地用解决方案回答这个问题，您是否介意更进一步并评论您的部分代码，以便我可以将其链接到正确的 html？
我认为理解这个脚本会让我走上一条通往更高级的 Javascript 和 Jquery 的道路。谢谢。
最佳答案
编辑:我找到了一个更好的 example提供了一些代码。转到讨论如何向左滑动元素的部分。如果您有任何疑问，请告诉我们。
我还冒昧地为您提供了一个完整的工作示例(与文章中的示例完全相同)，因此您可以在浏览器中运行它
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<style>
.slide {
position: relative;
background-color: gray;
height: 100px;
width: 500px;
overflow: hidden;
}
.slide .inner {
position: absolute;
left: -500px;
bottom: 0;
background-color:#e3e3e3;
height: 30px;
width: 500px;
}
</style>
<script>
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
</head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
</div>
</body>
</html>
这篇文章解释了其中的大部分内容，但我将简要介绍一下。从本质上讲，我们正在做的是，无论你想滑动什么，我们都会改变左边的位置，这样它就会出来。最初，我将 CSS 设置为 -500px，因此它位于屏幕之外。然后 javascript 监听按钮单击并通过更改左侧位置来移动 div。 Jquery 的 animate()函数完成了大部分工作。
关于此的令人困惑的一点是三元运算符。您可以找到更多信息 here .本质上它只是检查 left 属性看它是否为 0。如果是，我们想将它移回外部到 -500px。如果左边不是 0px，我们知道它一定在屏幕之外，所以我们将它移回 0px。
如果您对其他任何事情感到困惑，请告诉我们。
关于javascript - 点击链接，div滑出，链接div滑入，点击关闭重新加载第一个div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12186469/