0

我有 2 个 div 和 1 个 iframe div。所以，我只需要添加动画来将这个 div 移动到左边，我不知道怎么做，因为我已经 onClick 了。你可以帮帮我吗？

<div id="page3" onClick='document.getElementById("ifr").src="text2.html";'>2</div>
<div id="page1" onClick='document.getElementById("ifr").src="text1.html";'>1</div>
<div id="middlediv"><iframe id='ifr' width='100%' height='100%' src="text1.html"</iframe></div>

十分感谢！！！

所以，现在我有这个java代码：

function proc1(){
wwidth=window.innerWidth;
wheight=window.innerHeight;
document.getElementById('rightdiv').style.height=wheight-200-10+'px';
document.getElementById('leftdiv').style.height=wheight-200-10+'px';
document.getElementById('middlediv').style.height=wheight-200-10+'px';
document.getElementById('middlediv').style.width=wwidth-200-10+'px';
}
function MoveGridLeft()
{
   $('#page3').animate({
   'marginLeft' : "+=50px"
   });
 }

这个脚本 stroke <script type="text/javascript" src="jquery.min.js" src="1.js"> 1.js 有上面的代码。动画不起作用，脚本也不起作用

4

2 回答 2

0

您可以在一个事件中调用两个函数

onClick='document.getElementById("ifr").src="text2.html"; MoveGridLeft();'

jQuery函数移动

function MoveGridLeft()
{
   $('#page3').animate({
   'marginLeft' : "-=50px"
   });
 }

更新：

从此链接下载 jQuery 文件并将对项目的引用添加为：

<script type="text/javascript" src="/scripts/jquery-1.9.1.min.js"></script>

这是解释如何使用 CSS3 制作动画的文章。

于 2013-04-28T14:10:01.097 回答
0

内联处理程序中的所有 javascript 代码onclick都自动包装在一个函数中，请参阅SO 上的这个问题。

因此，没有理由不能添加额外的语句（或在这种情况下的函数调用），例如：
onclick="document.getElementById('ifr').src='text1.html'; moveDivLeft();"

更新（对您更新的问题）：

  • Java与 javascript 之类的 EcmaScript 方言 无关。
  • 您从Shafqat Masood 的答案MoveGridLeft中复制的（依赖于 JQuery 的）函数增加了左边距，因此它将 div向右移动而不是向左移动。根据您的代码，您需要设置正确的属性（如左|右位置|边距）以实现您的目标（考虑到您现有的标记/布局/样式）。根据您的所有评论（在此问题下方）查看此示例jsfiddle： jsfiddle.net/t74fT/3/
  • 行：<script type="text/javascript" src="jquery.min.js" src="1.js">是错误的：你给了它 2 个无效标记的来源。
    每个（外部）脚本都有自己的脚本标签，例如：
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="1.js"></script>
    请注意，现在您有 3 个文件，而不是像您最初询问的那样只有 1 个。
于 2013-04-28T14:15:35.733 回答