Question

我正在做一个心理学研究项目，所以我真的是JavaScript的初学者。不过，我必须完成这项工作并且非常具体。

我想在点击时放大页面的元素（书籍封面），同时在其旁边打开额外的内容（一些文字），我希望能够离开（关闭文本和只需点击一下即可缩小。

到目前为止，我设法使用zoomooz.js轻松缩放部分，然后使用jQuery完成剩下的工作。我的书封面和我的文字页面（每个一个div）在一个更大的div（“容器”）中彼此叠加。单击容器时，封面和文本会变为动画：一个在左侧移动，另一个在右侧移动。点击容器并使用stopPropagation后，它们会在中间重新组合在一起，按照计划将文本隐藏在封面后面。

现在我的问题是，当我尝试在动画我的div时使用zoomooz时，它们会发生冲突。那里的方式，放大，工作正常：同时缩放和动画。但是对于回来的方式，缩小，我无法让他们一起工作。 Zoomooz接管。我试着手工编写zoomooz，但我不知道我在做什么 - 我只是觉得它与某处的“stopPropagation”有关。

这里是我的模拟/测试页面，它包含所有内容，应该让事情更清晰。如果有人能帮助我，我会很高兴的。非常感谢。

<!DOCTYPE html>
<html>
<head>
  <style>
  div#main {background:yellow;z-index:1;}
  div#container {position:relative;
    width:232px;height:152px;border:2px dotted black;
    background:#eee;margin:0 auto;z-index:10;}
  div.cover {z-index:30;position:absolute;left:58px;
    background:blue;width:116px;height:152px}
  div.text {z-index:20;position:absolute;left:58px;
    background:green;width:116px;height:152px}
  p {font-size:0.3em;}
  </style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
 <!-- ZOOMOOZ-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
 <script src="jquery.zoomooz.min.js"></script>
 <script type="text/javascript" src="src/js/jquery.zoomooz-helpers.js"></script>
 <script type="text/javascript" src="src/js/jquery.zoomooz-anim.js"></script>
 <script type="text/javascript" src="src/js/jquery.zoomooz-core.js"></script>
 <script type="text/javascript" src="src/js/jquery.zoomooz-zoomTarget.js"></script>
 <script type="text/javascript" src="src/js/jquery.zoomooz-zoomContainer.js"></script>
 <script type="text/javascript" src="src/js/purecssmatrix.js"></script>
 <script type="text/javascript" src="src/js/sylvester.src.stripped.js"></script>

</head>
<body>
<div id="main">
 <div id="container"> <!--ADD A class="zoomTarget" TO HAVE THE ZOOMING WORKING FINE BUT ONLY ONE WAY -->
  <div class="text">
   <p>aefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhze</p>
   <p>aefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhze</p>
   <p>aefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhze</p>
  </div>
  <div class="cover">
  </div>
 </div>
 </div>
</div>

<!-- script COVER + CONTENTS-->
<script>
$(document).ready(function() {
  $("#container").click(function(e) {
    $(".cover").animate({left: '0px'});
    $(".text").animate({left: '116px'});
     e.stopPropagation();
  });
  $(document).click(function() {
    $(".cover").animate({left: '58px'});
    $(".text").animate({left: '58px'});
  });
});
</script>

</body>
</html>

Answer 1

我明白了！

事实上非常简单。要缩小，我不得不命令缩放到身体。请参见“缩小”编码：

<script>
 $(document).click(function() {
     $('body').zoomTo({targetsize:0.75, duration:600});
  });
</script>

作为更复杂的使用的一个例子，整个功能集合在一起：

<script>
$(document).ready(function() {
 $(".cover").click(function(e) {
  $(this).animate({left: '0px'});
  $(this).siblings(".text").animate({left: '116px'});
  $(this).parent().siblings().fadeOut();
  $(this).parent().zoomTo({targetsize:0.75, duration:600});
   e.stopPropagation();
  });
 $(document).click(function() {
  $(".cover").animate({left: '58px'});
  $(".text").animate({left: '58px'});
  $(".container").fadeIn();
  $('body').zoomTo({targetsize:0.75, duration:600});
  });
});
</script>

jQuery和Zoomooz.js之间的冲突：animate＆amp;同时zoomTarget

1 个答案: