点击按钮点击请帮我看一些如何通过将其属性作为src图像并将其放置在另一个div中来移动元素的示例,请在下面的html示例中找到,这里我需要将respuestas img移动到带有动画效果的文章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>
工作得很好,这里是小提琴
http://jsfiddle.net/h7tuehmo/3/
Javscript:
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:
// 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>