1

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

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

如果这里有人很好地用解决方案回答这个问题，您介意更进一步并评论您的部分代码，以便我可以将其链接到正确的 html 吗？

我认为理解这个脚本会让我走上一条通往更高级的 Javascript 和 Jquery 的道路。谢谢。

4

2 回答 2

1

编辑：我找到了一个更好的例子，提供了一些代码。转到它讨论如何向左滑动元素的部分。如果您有任何问题，请告诉我们。

我还冒昧地为您提供了一个完整的工作示例（与文章中的示例完全相同），因此您可以在浏览器中运行它

<!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()函数完成了大部分工作。

令人困惑的是三元运算符。您可以在此处找到更多信息。本质上，它只是检查 left 属性是否为 0。如果是，我们希望将其移回外部 -500px。如果左边不是 0px，我们知道它一定在屏幕之外，所以我们把它移回 0px。

如果您还有其他任何困惑，请告诉我们。

于 2012-08-29T21:07:34.837 回答
1

为你创建了简单的小提琴（注意它在悬停时工作！！）但它应该让你继续前进，在我的国家有点晚了所以我的大脑不能正常工作:) 小提琴在这里

$(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);

 });
 });
于 2012-08-30T01:43:34.387 回答