Question

我希望自己知道如何写这个。 http://www.cubancouncil.com/work/project/coppola-winery/

链接页面具有我想要使用的确切功能。我怎么相信他们的剧本有效。单击一个隐藏该图像的容器div的图像，将其向右滑动，然后从右到左加载/滑动一个较大的图像，该图像位于固定位置。

如果有人能够通过解决方案回答这个问题，那么您是否应该更进一步并对代码的某些部分进行评论，以便将其链接到正确的HTML？

我认为理解这一个脚本会让我走上更加先进的Javascript＆amp; amp; jQuery的。感谢。

Answer 1

编辑：我找到了更好的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找到更多信息。基本上它只是检查左边的属性，看它是否为0.如果是，我们想把它移回到-500px之外。如果左边不是0px，我们知道它必须在屏幕之外，所以我们将其移回0px。

如果您有任何其他问题，请告诉我们。

Answer 2

为你创造了一个简单的小提琴（注意它在HOVER工作!!）但它应该让你去，在我的国家有点晚，所以我的大脑不能正常工作:) Fiddle here

$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();  
$(".wrapper").hover(function(){        
$(".inner").stop().animate({top:-innerHeigth},1000);
 //alert(innerHeigth)
 },function(){
 $(".inner").stop().animate({top:0},1000);

 });
 });

单击链接，div滑出，链接div幻灯片，单击关闭并重新加载第一个div

2 个答案: