私はこのアニメーションを持っています: http://codepen.io/tiamat/pen/Jrdvx 色付きの円が黒い円に入ると、アニメーションが再開されます。入っていない場合は、circle.com の Web サイトに移動します。これらのアクションの両方を停止できますか? 成功した場合は、アニメーションを再開するのではなく、色付きの円を黒い円のままにしたいと思います。
html:
<div id="intreg" style="border:1px solid #000000; width:750px; height: 550px;" >
<div id="jos">
<div id="square_drop"ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>
<div id="circle_drop"ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>
</div>
<div id="sus">
<div id="triangle_drop"ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>
<div id="square" draggable="true"ondragstart="return dragStart(event)"></div>
<div id="circle" draggable="true"ondragstart="return dragStart(event)"></div>
<div id="triangle" draggable="true"ondragstart="return dragStart(event)"></div>
</div>
</div>
JavaScript:
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,100,100);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
event.preventDefault();
}
function dragDrop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.stopPropagation();
return false;
}
CSS:
#square {
-webkit-animation: move4 3s forwards linear ;
-moz-animation: move4 3s forwards linear ;
-o-animation: move4 3s forwards linear ;
}
@-webkit-keyframes move4 {
0% {margin-bottom: -400px;margin-left:-100px;}
100% {margin-top: -130px;margin-left: 400px;}
}
@-moz-keyframes move4 {
0% {margin-top: 1400px;margin-left:-100px;}
100% {margin-top: 30px;margin-left: 400px;}
}
@-o-keyframes move4 {
0% {margin-bottom: -400px;margin-left:-100px;}
100% {margin-top: -130px;margin-left: 400px;}
}
#circle {
-webkit-animation: move5 3s forwards linear ;
-moz-animation: move5 3s forwards linear ;
-o-animation: move5 3s forwards linear ;}
@-webkit-keyframes move5 {
0% {margin-top: 1000px;margin-left:-100px;}
100% {margin-top: -40px;margin-left: 150px;}
}
@-moz-keyframes move5 {
0% {margin-top: 1000px;margin-left:-100px;}
100% {margin-top: -40px;margin-left: 150px;}
}
@-o-keyframes move5 {
0% {margin-top: 1000px;margin-left:-100px;}
100% {margin-top: -40px;margin-left: 150px;}
}
#triangle {
-webkit-animation: move6 3s forwards linear ;
-moz-animation: move6 3s forwards linear ;
-o-animation: move6 3s forwards linear ;
}
@-webkit-keyframes move6 {
0% {margin-top: 1000px;margin-left:-100px;}
100% {margin-top: -120px;margin-left: 20px;}
}
@-moz-keyframes move6 {
0% {margin-top: 1000px;margin-left:-100px;}
100% {margin-top: -120px;margin-left: 20px;}
}
@-o-keyframes move6 {
0% {margin-top: 1000px;margin-left:-100px;}
100% {margin-top: -120px;margin-left: 20px;}
}