Помогите с функцией
Вообщем доделал я движущиеся блоки теперь вопрос такой: как заставить желтый квадрат сдвигать влево и возвращать блок обратно на место?
<script>
var interval;
function slide() {
if (parseInt(document.getElementById("block").style.right) < 400) {
document.getElementById("block").style.right = parseInt(document.getElementById("block").style.right)+10
setTimeout("slide()",10)
}
}
function back() {
if (parseInt(document.getElementById("block").style.right) > 0) {
document.getElementById("block").style.right = parseInt(document.getElementById("block").style.right)-10
setTimeout("back()",10) ;
}
}
</script>
<div id="block" style="z-index: 2; position:absolute; right:0px; top:100px; width:100%; height:150px; background:red;">
<a href="javascript:slide()" style="position:absolute; width:30px;height:30px; right:30px; top:30px; background:yellow;"></a></div>
<div style="z-index: 1; position:absolute; right:0px; top:100px; width: 400px; height:150px; background:black;">
<a href="javascript:back()" style="position:absolute; width:30px; height:30px; right:30px; top:30px; background:green;"></a></div>
Заранее спасибо |
<style>
.block.moved {
left: 200px;
}
.block {
background: red;
width: 20px;
height: 20px;
position: absolute;
left: 0;
top: 35px;
transition: left 1s ease;
-webkit-transition: left 1s ease;
-moz-transition: left 1s ease;
-o-transition: left 1s ease;
-ms-transition: left 1s ease;
}
</style>
<a>Двигать</a>
<div class="block"></div>
<script>
document.querySelector("a").addEventListener("click", function () {
document.querySelector(".block").classList.toggle("moved");
}, false);
</script>
|
Это то что нужно спасибо сейчас буду шаманить!
|
а есть ли возможность совместить с моей функцией?
моя функция мне необходима для 2 div |
<style>
.block.moved {
left: 200px;
}
.block {
background: red;
width: 20px;
height: 20px;
position: absolute;
left: 0;
top: 35px;
transition: left 1s ease;
-webkit-transition: left 1s ease;
-moz-transition: left 1s ease;
-o-transition: left 1s ease;
-ms-transition: left 1s ease;
}
</style>
<div>
<a>Двигать</a>
<div class="block"></div>
</div>
<div>
<a>Двигать</a>
<div style="top: 65px;" class="block"></div>
</div>
<script>
[].forEach.call(document.querySelectorAll("a"), function (elem) {
elem.addEventListener("click", function () {
this.parentNode.querySelector(".block").classList.toggle("moved");
}, false)});;
</script>
|
Смысл понятен спасибо!
|
А не подскажешь мне еще 1 момент: как мне тег <a> посадить во внутрь передвигаемого <div> пробовал назначит класс не получилось! во вне работает отлично. ставлю во внутрь не работает!
|
<style>
.block.moved {
left: 200px;
}
.block {
background: red;
width: 200px;
height: 20px;
position: absolute;
left: 0;
top: 35px;
transition: left 1s ease;
-webkit-transition: left 1s ease;
-moz-transition: left 1s ease;
-o-transition: left 1s ease;
-ms-transition: left 1s ease;
}
</style>
<div>
<div class="block"><a>Двигать</a></div>
</div>
<div>
<div style="top: 65px;" class="block"><a>Двигать</a></div>
</div>
<script>
[].forEach.call(document.querySelectorAll("a"), function (elem) {
elem.addEventListener("click", function () {
this.parentNode.classList.toggle("moved");
}, false)});
</script>
|
Отлично!!! Теперь и в другом div чтобы функция работала. Вот пример:
<style>
.block.moved {
right: 300px;
}
.block {
background: red;
width: 100%;
height: 100px;
position: absolute;
right: 0;
z-index:2;
top: 35px;
transition: right 1s ease;
-webkit-transition: right 1s ease;
-moz-transition: right 1s ease;
-o-transition: right 1s ease;
-ms-transition: right 1s ease;
}
.blocks{
background: black;
width: 300px;
height: 100px;
position: absolute;
right: 0;
top: 35px;
z-index:1;
}
.a{
background:green;
width:30px;
height:30px;
position:absolute;
top:20px;
right:20px;
}
</style>
<div>
<div class="block">
<a class="a"></a>
</div>
<div class=blocks>
<a class="a" style="background:blue;"></a>
</div>
</div>
<script>
[].forEach.call(document.querySelectorAll(".a"), function (elem) {
elem.addEventListener("click", function () {
this.parentNode.classList.toggle("moved");
}, false)});
</script>
|
<style>
.block.moved {
right: 300px;
}
.blocks.moved {
right: 260px;
}
.block {
background: red;
width: 100%;
height: 100px;
position: absolute;
right: 0;
z-index:2;
top: 35px;
transition: right 1s ease;
-webkit-transition: right 1s ease;
-moz-transition: right 1s ease;
-o-transition: right 1s ease;
-ms-transition: right 1s ease;
}
.blocks{
background: black;
width: 300px;
height: 100px;
position: absolute;
right: 0;
top: 35px;
z-index:1;
transition: right 1s ease;
-webkit-transition: right 1s ease;
-moz-transition: right 1s ease;
-o-transition: right 1s ease;
-ms-transition: right 1s ease;
}
.a{
background:green;
width:30px;
height:30px;
position:absolute;
top:20px;
right:20px;
}
</style>
<div>
<div class="block">
<a class="a"></a>
</div>
<div class=blocks>
<a class="a" style="background:blue;"></a>
</div>
</div>
<script>
[].forEach.call(document.querySelectorAll(".a"), function (elem) {
elem.addEventListener("click", function () {
this.parentNode.classList.toggle("moved");
}, false)});
</script>
|
| Часовой пояс GMT +3, время: 12:00. |