Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/6: Рейтинг темы: голосов - 6, средняя оценка - 5.00
23 / 23 / 1
Регистрация: 27.04.2013
Сообщений: 385
Записей в блоге: 3
1

Как сделать чтобы элемент плавно изменял свою позицию?

27.10.2013, 13:50. Просмотров 1241. Ответов 12
Метки нет (Все метки)


Здравствуйте скажите пожалста почему не работает код?
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function poehal()
{var h =0;
var pp = document.getElementById ('spisok');
var zz = pp.style.left;
if (zz<400)
{h+=1;
zz = h +'px';
setTimeout (poehal, 1500);}
 
else
{h-=1;
zz = h +'px';
setTimeout (poehal, 1500);
}
 
}
HTML5
1
2
3
4
5
6
7
<ul id = "spisok" style = "width:150px;
    position:relative; left = 0">
        <li>Music</li>
        <li>Movie</li>
        <li>Games</li>      
    </ul>
<a href = "javascript: poehal()">Поехали</a>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
27.10.2013, 13:50
Ответы с готовыми решениями:

Как сделать чтобы при клике на блок переместиться плавно вниз
Как сделать чтобы при клике на блок я перемещался на 768px плавно вниз

Подскажите, пожалуйста, как сделать так, чтобы мой div открывался и закрывался плавно
HTML: &lt;nav class=&quot;menu-open&quot;&gt; &lt;div class=&quot;button-open&quot;&gt; &lt;/div&gt; &lt;a...

Сделать чтобы позиционирование менялось плавно
Вот пример кода if(button == 'off'){ $('.switch').css('background-position', 'right'); }...

Как сделать чтобы анимация проходила плавно и быстро
И еще.Ось вращения надо сделать жирнее.

12
388 / 275 / 76
Регистрация: 19.09.2011
Сообщений: 828
27.10.2013, 14:23 2
qlipoth, хах, а почему должно работать?
шо то непонятно накалякано. если нет желания разбираться с js - есть jquery, там в пару строчек анимация делается.
0
23 / 23 / 1
Регистрация: 27.04.2013
Сообщений: 385
Записей в блоге: 3
27.10.2013, 14:25  [ТС] 3
в jquery есть функция animate. Я хочу сделать что-то подобное чтобы элемент плавно двигался по экрану вправо а дойдя до определенного значения начал двигаться влево
0
388 / 275 / 76
Регистрация: 19.09.2011
Сообщений: 828
27.10.2013, 14:39 4
qlipoth, смена кадра в полторы секунды не будет плавно.

Цитата Сообщение от qlipoth Посмотреть сообщение
var zz = pp.style.left;
Цитата Сообщение от qlipoth Посмотреть сообщение
zz = h +'px';
тут непонимание основ js, если хочешь сделать что то на js, вероятно, нужно выучить сам js 0_o
должно быть хотя бы
Javascript
1
2
3
var zz = pp.style;
...
zz.left = h + 'px';
1
23 / 23 / 1
Регистрация: 27.04.2013
Сообщений: 385
Записей в блоге: 3
27.10.2013, 14:45  [ТС] 5
мне хотя бы принцип анимации на js понять
0
388 / 275 / 76
Регистрация: 19.09.2011
Сообщений: 828
27.10.2013, 15:35 6
qlipoth, точно? ну вот пример:
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var requestAnimationFrame = window.requestAnimationFrame
 || function(fn){return setTimeout(fn, 1000 / 60)}
;
 
var canvas = document.body.appendChild(document.createElement("canvas"));
var context = canvas.getContext("2d");
canvas.width = 100;
canvas.height = 100;
 
var ball = {
    x: 0,
    y: 0,
    r: 10,
};
 
var draw = function(){
    var canvas = context;
    canvas.beginPath();
    canvas.clearRect(0, 0, canvas.canvas.width, canvas.canvas.height);
    
    canvas.strokeStyle = "#000";
    canvas.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
    canvas.stroke();
}
 
var angle = 0; // degrees
var r = 20;
var update = function(){
    var translateX = 50;
    var translateY = 50;
    ball.x = Math.sin(angle / 180 * Math.PI) * r + translateX;
    ball.y = Math.cos(angle / 180 * Math.PI) * r + translateY;
    ball.r = Math.sin((angle * 4) / 180 * Math.PI) + 1 * 10;
    angle += 5;
}
 
var animationLoop = function(){
    update();
    draw();
    requestAnimationFrame(animationLoop);
}
 
animationLoop();
http://jsfiddle.net/syDSm/1/

точно нужно понять только принцип? тут все понятно, но вместо DOM используется canvas. не можешь переделать под DOM - значит ты соврал и короче иди читай учебники.
0
635 / 522 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
28.10.2013, 10:47 7
Ну как вариант можно реализовать вот так: (можно и через setInterval)
CSS
1
2
3
4
5
6
7
div{
        background-color: red;
        width: 200px;
        height: 200px;
        position: relative;
        left: 0;
     }
HTML5
1
<div id="test"></div>
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
29
30
31
32
33
34
35
36
37
  var div = document.getElementById('test');
 
  function infinityMove(el) {
 
    var left = parseInt(getComputedStyle(el).left, 10);
 
    setTimeout(function timer(){
 
      left += (setWay(left)) ? 1 : -1;
      el.style.left = left + 'px';
 
      setTimeout(timer, 0);
 
    }, 10);
 
  }
 
  var setWay = (function() {
 
    var ltr = true;
 
    return function(position) {
 
      if(position >= 400) {
       ltr = false;
      }
      if(position <= 0) {
         ltr = true;
      }
 
      return ltr;
 
    }
  
  })();
 
  infinityMove(div);
1
23 / 23 / 1
Регистрация: 27.04.2013
Сообщений: 385
Записей в блоге: 3
28.10.2013, 18:31  [ТС] 8
Здорово только не совсем понял как работает setWay . значение функции в переменную записывается ... вобщем не совсем ясен этот прием. можете пояснить?

Добавлено через 13 минут
почему вот такая конструкция не работает?
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function setWay(position)
  {
  var ltr = true;
   if(position >= 400) {
       ltr = false;
      }
      if(position <= 0) {
         ltr = true;
      }
 
      return ltr;
 
    
  }
0
635 / 522 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
28.10.2013, 18:50 9
Здорово только не совсем понял как работает setWay?
Я привел один из вариантов реализации данной задачи используя функцию setWay для хранения данных о пути в замыкании. Немедленно вызываемая функция срабатывает один раз, а далее в замыкании между вызовами хранится переменная ltr в строке 21. Ваш вариант не может использоваться для хранения данных.
1
23 / 23 / 1
Регистрация: 27.04.2013
Сообщений: 385
Записей в блоге: 3
28.10.2013, 19:22  [ТС] 10
а кажется понял. в моем примере значение ltr всегда true будет так как функция вызывается один раз после чего удаляется сборщиком мусора а замыкание позволяет переключать значения с true на false так?
0
635 / 522 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
28.10.2013, 20:31 11
а кажется понял. в моем примере значение ltr всегда true будет так как функция вызывается один раз после чего удаляется сборщиком мусора а замыкание позволяет переключать значения с true на false так?
Да, только у вас значение по достижении 400 поменяется на false, потом опять на true и так далее... а так все верно
1
23 / 23 / 1
Регистрация: 27.04.2013
Сообщений: 385
Записей в блоге: 3
28.10.2013, 21:47  [ТС] 12
спасибо за помощь! меня еще один вопрос волнует. я немного код дописал , сделал чтобы еще и прозрачность при движении менялась.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
if (setWay(left) && opacity!=0)
          { 
             
             opacity-=0.008;
            el.style.opacity = opacity;
              
              
          }
          else if (!setWay(left) && opacity!=1)
            {opacity+=0.008;
            el.style.opacity = opacity;
            }
по какой-то причине значение opacity не доходит до нуля а в консоле ошибок появляется сообщение ошибка при парсинге значения opacity. Где я допустил ошибку?
0
635 / 522 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
28.10.2013, 22:17 13
Я так понимаю вы хотели организовать что-то типа этого:
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var div = document.getElementById('test');
 
  function infinityMove(el) {
 
    var left = parseInt(getComputedStyle(el).left, 10),
        opacity = 1,
        max = 400;
 
    setTimeout(function timer(){
 
      left += (setWay(left)) ? 1 : -1;
      opacity = 1 - (left/max);
 
      el.style.left = left + 'px';
      el.style.opacity = opacity;
 
      setTimeout(timer, 0);
 
    }, 10);
 
  }
 
  var setWay = (function() {
 
    var ltr = true;
 
    return function(position) {
 
      if(position >= 400) {
       ltr = false;
      }
      if(position <= 0) {
         ltr = true;
      }
 
      return ltr;
 
    }
  
  })();
 
  infinityMove(div);
Для этого нужно точно знать конец и начало анимации для контроля от 0 до 1 прозрачности.
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.10.2013, 22:17

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Как сделать чтобы цвет текста плавно менялся
Как сделать чтобы цвет текста плавно переливался? void RenderDVD(void) { int left, top; ...

Сделать чтобы элемент из ComboBox открывал свою форму при нажатии на Button
Нужно cделать чтоб элемент из combobox открывал свою Форму при нажатии на Batton. Допустим, у меня...

Как сделать так, чтобы игрок не скатывался по ступеньке, а плавно по ней ходил?
Как сделать так, чтобы игрок не скатывался по ступеньке, а плавно по ней ходил?

Сделать так, чтобы массив из метода использовался в обоих методах сортировки и не изменял своего значения
подскажите пожалуйста, как сделать так, чтобы массив из метода Metod использовался в обоих методах...


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

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

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