move an element from one div to another div with animate effect on button click using html and jquery
点击按钮,请帮助我展示一些例子,如何移动一个元素,把它的属性作为SRC图像,并把它放在另一个DIV,请找到下面的HTML示例,这里我需要移动respuestas img到文章preg与动画效果,并在重置时恢复。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <html> <body> <section id="preguntas"> </article> </article> </article> </article> </article> </article> <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> </section> <input id="Move" type="button" value="Done" /><br /> </body> </html> |
让它工作,这是小提琴
http://jsfiddle.net/h7tuehmo/3/
Javscript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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 }) }) }); |
这里有一个类似于Martijn de Langhs回答的解决方案,但是有一个按钮,没有jQuery:
http://codepen.io/pen/rrpqex
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | // 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'; } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | /* 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; } |
1 2 3 | <!-- The HTML (dead simple for the tutorials purpose) --> <button id="button" role="button">Move!</button> |