2 / 2 / 0
Регистрация: 23.06.2014
Сообщений: 167
1

Плавное движение блока "А" вправо при нажатии на блок "Б". Реализация на чистом JS

23.04.2015, 14:00. Показов 2434. Ответов 7
Метки нет (Все метки)

Здравствуйте. Собственно все что необходимо указано в заголовке. Есть блок, который абсолютно спозиционирован. Шириной он 600px и его свойство left равно -640px. тоесть он спрятан. По нажатии на кнопку, он плавно скользит вправо до отметки left:0. И хочу чтоб по нажатию на ту же кнопку, он уходил в свое исходное положение left: -640px;
Подскажите, как реализовать, пожалуйста. Особенно не знаю как плавно это сделать на чистом JS.
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
23.04.2015, 14:00
Ответы с готовыми решениями:

Как написать регулярное выражение для выдергивания английских букв и символов: "+", ",", ":", "-", " ", "!", "?" и "."
Не могу ни как собразить как написать регулярное выражение для выдергивания английских букв и...

Получить значение из {"text1":"val1","text2":"val2","text3":{"text":"val"}}
Есть такая строка var my = '{"text1":"val1","text2":"val2","text3":{"text":"val"}}'; Как из...

Создание браузерной CAD, "math scetchpad", "Geogebra", "Живая геометрия""
Создаю браузерную версию CAD системы, для обучения школьников стереометрии и планиметрии, что-то...

перед и после else необходимо закрывать и открывать блок символами "{" и "}", соответственно
Здравствуйте, я привык прислушиваться к советам ранее мне пояснили, что // перед и после else...

7
Ренегат
Эксперт HTML/CSS
1738 / 1083 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
23.04.2015, 14:44 2
VadimuSSS, вы хотите сделать прям на чистом js, или jquery использовать можно?

а вообще покажите ваш код "показывания" этого блока
или у вас его нет?
0
2 / 2 / 0
Регистрация: 23.06.2014
Сообщений: 167
23.04.2015, 14:47  [ТС] 3
BANO, есть только попытки. три строчки которые ни к чему не привели. получение елемента по id и функция которая потом меняет его значение с left:-640; на left:0; Но ничего не работает. Ну и на плавность я даже не рассчитывал в своих попытках.
0
Ренегат
Эксперт HTML/CSS
1738 / 1083 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
23.04.2015, 14:52 4
VadimuSSS, ну ты сначала покажи))

Добавлено через 3 минуты
вот смотри что я надыбал в интернете на счёт анимации
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
var start = null;
var element = document.getElementById("SomeElementYouWantToAnimate");
 
function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}
 
window.requestAnimationFrame(step);
1
2 / 2 / 0
Регистрация: 23.06.2014
Сообщений: 167
23.04.2015, 14:54  [ТС] 5
BANO, не хотелось светить этим позором, но вы меня вынудили пожалуйста:
Javascript
1
2
3
4
5
6
7
8
9
var menu = {}
    function init(){
        menu.itself = document.getElementById(list);
        menu.position = menu.itself.style.left;
    }
 
    function fadeOut(){
        menu.position = 0;
    }
потом я повесил функцию fadeOut на нужный блок путем onclick="fadeOut()"
0
3268 / 2804 / 1406
Регистрация: 15.01.2014
Сообщений: 6,122
23.04.2015, 14:58 6
Лучший ответ Сообщение было отмечено VadimuSSS как решение

Решение

VadimuSSS, можно конечно и на чистом JS сделать:
Кликните здесь для просмотра всего текста
Javascript
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
var minleft = -300,
    maxleft = 0,
    time = 1000,
    timer = null,
    toggled = false;
 
window.addEventListener('load', function () {
    var but = document.getElementById('but');
    var slider = document.getElementById('box');
    slider.style.left = minleft + 'px';
    but.addEventListener('click', function () {
        clearInterval(timer);
        var instanceleft = parseInt(slider.style.left, 10),
            init = (new Date()).getTime(),
            height = (toggled = !toggled) ? maxleft : minleft,
            disp = height - parseInt(slider.style.left, 10);
        timer = setInterval(function () {
            var instance = (new Date()).getTime() - init;
            if (instance <= time) {
                var pos = instanceleft + Math.floor(disp * instance / time);
                slider.style.left = pos + 'px';
            } else {
                slider.style.left = height + 'px';
                clearInterval(timer);
            }
        }, 1);
    }, false);
}, false);
Но я бы делал с помощью JS+CSS.
Кликните здесь для просмотра всего текста
Javascript
1
2
3
4
5
6
7
window.addEventListener('load', function () {
    var but = document.getElementById('but');
    var slider = document.getElementById('box');
    but.addEventListener('click', function () {
        slider.classList.toggle('slidein');
    }, false);
}, false);
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
#box {
    position: absolute;
    width: 300px;
    height: 300px;
    background: #999;
    left: -300px;
    -webkit-transition: left 1s linear;
    -moz-transition: left 1s linear;
    transition: left 1s linear; 
}
#box.slidein {
    left: 0;
}
1
Ренегат
Эксперт HTML/CSS
1738 / 1083 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
23.04.2015, 15:03 7
но на самом деле конечно в jquery это уже давно реализовано
0
2 / 2 / 0
Регистрация: 23.06.2014
Сообщений: 167
24.04.2015, 11:15  [ТС] 8
Lazy_Den, Я, видимо, не правильно выразился. Я и имел ввиду js+css. А говоря "чистый js, я подразумевал без jquery. Спасибо, я сейчас разберу ваш пример.

Добавлено через 20 часов 7 минут
Lazy_Den, Разобрал вроде все. Потом попробовал ради эксперимента добавить на один свой шаблон в качестве менюшки, но почему то не захотело работать.
Наверное надо подробнее разобраться. Спасибо большое за помощь в обучении.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
24.04.2015, 11:15

Создать программу такую, что пользователь вводит число, а мы ему выдаём "-лет" или "-год" "-года"
4)Создать программу такую, что пользователь вводит число, а мы ему выдаём &quot;-лет&quot; или &quot;-год&quot; &quot;-года&quot;.

Как убрать кнопки "Minimize" и "Maximize", "Close" в заголовке окна?
КАК УБРАТЬ КНОПОЧКИ 'Minimize' и 'Maximize', 'Close' в заголовке окна (чтобы не было крестика в...

Блок div скрыть/показать при нажатии на кнопку "показать все"
Добрый день. На странице:...

Загвоздка с "<input class="text2" onclick="document.getElementById ."
есть типа тест : 3 инпута , 1 радиобокс ... проблема в том что если вставить код на чистой...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.