问题描述
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240,240,231);
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
#animate1 {
width: 50px;
height: 50px;
left: 350px;
top: 2px;
position: absolute;
background-color: rgb(43,1,1);
}
</style>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
<div id="animate1"></div>
</div>
<script>
function myMove() {
var elem = document.getElementById("animate");
var elem1 = document.getElementById("animate1");
var pos = 0;
var pos1 = 0;
var id = setInterval(frame,5);
var id1 = setInterval(frame1,5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
function frame1() {
if (pos1 == 350) {
clearInterval(id1);
} else {
pos1++;
elem1.style.top = pos1 + "px";
elem1.style.right = pos1 + "px";
}
}
}
</script>
在上面的代码中,我有2个cubes(div)。单击按钮时,左立方体应从左向右移动直到对角线的尽头,而右立方体应从右向左移动对角线直到容器的尽头。但是,只有左方立方体从左向右移动,而右方立方体从顶向底部移动。 我希望将右立方体从对角线向右移动到容器的末端。这是我的沙盒链接。 https://codesandbox.io/s/autumn-sun-uz961?file=/index.html
解决方法
.animate1类的左边是:350px,使其右边变成:0:它将起作用。
context.contentResolver.openFileDescriptor(fileUri,"w")?.use {
val fileDescriptor = it
FileOutputStream(it.fileDescriptor).use {
printAdapter.onWrite(
arrayOf(PageRange.ALL_PAGES),fileDescriptor,CancellationSignal(),object : WriteResultCallback() {
})
}
}
function myMove() {
var elem = document.getElementById("animate");
var elem1 = document.getElementById("animate1");
var pos = 0;
var pos1 = 0;
var id = setInterval(frame,5);
var id1 = setInterval(frame1,5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
function frame1() {
if (pos1 == 350) {
clearInterval(id1);
} else {
pos1++;
elem1.style.top = pos1 + "px";
elem1.style.right = pos1 + "px";
}
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240,240,231);
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
#animate1 {
width: 50px;
height: 50px;
right:0px;
position: absolute;
background-color: rgb(43,1,1);
}
,
更新您的CSS,并将left: 350px;
的{{1}}更改为right: 0px;
:
#animate1
function myMove() {
var elem = document.getElementById("animate");
var elem1 = document.getElementById("animate1");
var pos = 0;
var pos1 = 0;
var id = setInterval(frame,5);
var id1 = setInterval(frame1,5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
function frame1() {
if (pos1 == 350) {
clearInterval(id1);
} else {
pos1++;
elem1.style.top = pos1 + "px";
elem1.style.right = pos1 + "px";
}
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240,231);
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
#animate1 {
width: 50px;
height: 50px;
right: 0px; /* instead of right : 350px; */
top: 2px;
position: absolute;
background-color: rgb(43,1);
}
,
主题外,但是您知道CSS过渡吗?
function myMove() {
document.getElementById("animate").classList.toggle("move");
document.getElementById("animate1").classList.toggle("move");
}
// try clicking the boxes themselves
for (let item of document.querySelectorAll("#animate,#animate1")) {
item.onclick = function() {
item.classList.toggle("move");
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240,231);
}
#animate {
width: 50px;
height: 50px;
top: 0;
left: 0;
position: absolute;
background-color: red;
transition: 3s linear;
}
#animate.move {
top: 350px;
left: 350px;
}
#animate1 {
width: 50px;
height: 50px;
right: 0px;
top: 2px;
position: absolute;
background-color: rgb(43,1);
transition: 3s linear;
}
#animate1.move {
top: 350px;
right: 350px;
}
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
<div id="animate1"></div>
</div>