logo标签列表

使用HTML和jQuery在按钮单击时实现动画效果将元素从一个div移动到另一个div

jqueryhtml
9

在按钮点击事件中，请帮我展示一些如何通过使用元素的src属性来移动它并将其放置在另一个div中的示例。请参考以下HTML示例，这里我需要将respuestas img移动到article preg，并使用动画效果，在重置时恢复原状。

<html>
<body>
<section id="preguntas">
<div id="base">
<article class="preg1">
        </article>
    <article class="prega"> 
  </article>
    <article class="pregb"> 
    </article>
  <article class="pregc">
        </article>
 <article class="pregd">
        </article>  
  <article class="prege">
    </article>
 <article class="pregf">
    </div>
    <div id="respuestas">
     <span id="img1">  <img src="img/img1.png" class="respuesta" alt="img1"/></span> 
     <span id="img2"> <img src="img/img2.png" class="respuesta" alt="img2"/></span>
     <span id="img3"> <img src="img/img3.png" class="respuesta" alt="img3"/></span>
     <span id="img4">   <img src="img/img4.png" class="respuesta" alt="img4"/>  </span>
    <span id="img5">    <img src="img/img5.png" class="respuesta" alt="img5"/></span>
    <span id="img6">    <img src="img/img6.png" class="respuesta" alt="img6"/></span>
    </div>
 </section>
  <div id="btns">

   <input id="Move" type="button" value="Done" /><br />
    </div>
 </body>
</html>
我在谷歌上搜索时，第一个出现的是这个问题：如何将一个元素移动到另一个元素中。这是否是您要找的内容？ - Calvin Scherle
类似的，但在按钮点击时我需要使用动画效果移动它。 - Charlie pito
类似这样的吗？http://www.w3schools.com/html/html5_draganddrop.asp - Martijn de Langh
链接只是一个简单的拖放，而我需要在按钮点击事件中移动我的元素。 - Charlie pito
类似于这个 http://jsfiddle.net/jFuQD/19/ 的东西。 - Charlie pito
@RahilKhan 看起来这就是你要找的东西了？我在 fiddle 上进行了 fork，所以它会在点击时发生。http://jsfiddle.net/o9yjrz3L/ - Leto
3个回答
13

以下是与Martijn de Langhs'回答类似但采用按钮且没有jQuery的解决方案：

http://codepen.io/pen/RRPQEX

// The JavaScript (should work in all major browsers and IE8+)

var elements = document.getElementsByClassName('element');
var target = document.getElementsByClassName('target')[0];
var button = document.getElementById('button');

// store the x,y coordinates of the target
var xT = target.offsetLeft;
var yT = target.offsetTop;

// add a click event listener to the button
button.addEventListener('click', function() {
  for (var i = 0; i < elements.length; i++) {
    // store the elements coordinate
    var xE = elements[i].offsetLeft;
    var yE = elements[i].offsetTop;
    // set elements position to their position for smooth animation
    elements[i].style.left = xE + 'px';
    elements[i].style.top = yE + 'px';
    // set their position to the target position
    // the animation is a simple css transition
    elements[i].style.left = xT + 'px';
    elements[i].style.top = yT + 'px';
  }
});
/* The CSS you need for the animation: */

.element,
.target {
  position: absolute;
  transition: left 1s ease-out, top 1s ease-out;
}

/* And the rest... */

/*
 * Style everything to be visible
 */

.element,
.target {
  width: 10px;
  height: 10px;
  background-color: green;
}
.target {
  background-color: red;
}

/*
 * Randomize the elements position
 */

.element:nth-child(1) {
  left: 43px;
  top: 10px;
}
.element:nth-child(2) {
  left: 46px;
  top: 22px;
}
.element:nth-child(3) {
  left: 99px;
  top: 26px;
}
.element:nth-child(4) {
  left: 180px;
  top: 174px;
}
.element:nth-child(5) {
  left: 121px;
  top: 90px;
}
.target {
  top: 25px;
  left: 147px;
}
<!-- The HTML (dead simple for the tutorials purpose) -->

<button id="button" role="button">Move!</button>

<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>

<div class="target"></div>

7

搞定了，这是代码片段

http://jsfiddle.net/h7tuehmo/3/

JavaScript:
var x;
var y;
$('article').each(function(index){
    $(this).click(function(){
        $(this).addClass('selected') ;
        x = $(this).offset().left;
        y = $(this).offset().top;
    })
    });

$('img').each(function(index){
    var xi = $(this).offset().left;
    var yi = $(this).offset().top;
    $(this).css('left', xi).css('top', yi);
    $(this).click(function(){
         $(this).animate({
    left: x,
    top: y
         })
    })

});
谢谢，这不是我想要的，但我会尝试解决它。我需要一个按钮事件而不是对象本身上的事件。 - Charlie pito
一个按钮放在哪里？图像上还是您想要的位置上？将按钮放置在您要它们的问题帖子的 HTML 中 <button>Move</button>。 - Martijn de Langh
请查看我创建的这个 jsfiddle：http://jsfiddle.net/rahilkhan/r03ey8h6/。 我需要做的是，当点击“show”时，使 img7 和 img8 向上移动并停留在 pregs 中。 - Charlie pito
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接