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

Как ускорить движение объекта мышкой?

09.06.2014, 13:02. Просмотров 625. Ответов 5
Метки нет (Все метки)

http://beta.maquetter.com/client
зажимаю мышку на картинке - двигаю картинку влево-вправо - она двигается с запаздыванием, а как сделать плавное движение картинки?
под 10 строчкой идет движение объекта, на 16 строчке меняется marginLeft
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
44
45
46
47
48
49
50
51
52
53
54
55
return{
            restrict: 'EA',
            link: function(scope,element,attrs) {
                var startX, startMarginLeft;
                $swipe.bind(element, {
                'start': function(coords) {
                    startX = coords.x;
                    startMarginLeft =  parseInt(element[0].style.marginLeft,10);
                },
                'move': function(coords) {
                    var deltaX = coords.x - startX;
                    var offsetRight = window.innerWidth - (element[0].offsetLeft + element[0].width);
                    var toRight = deltaX>0;
                    if (offsetRight >=0 && !toRight){
                        var currentMarginLeft = window.innerWidth - element[0].width;                       
                        element[0].style.marginLeft = currentMarginLeft + "px";
                        return false;
                    } 
                    if (element[0].offsetLeft >=0 && toRight){
                        element[0].style.marginLeft=0;
                        return false;
                    } 
                        var currentMarginLeft  = startMarginLeft + deltaX;
                        element[0].style.marginLeft = currentMarginLeft + "px";
                        // cursorX_tmp = cursorX_cur;
                // ...
                },
                'end': function(coords) {
                    var deltaX = coords.x - startX;
                    var offsetRight = window.innerWidth - (element[0].offsetLeft + element[0].width);
                    if (offsetRight >=0){
                        var currentMarginLeft = window.innerWidth - element[0].width;
                        element[0].style.marginLeft = currentMarginLeft + "px";
                        return false;
                    } 
                    if (element[0].offsetLeft >=0){
                        element[0].style.marginLeft=0;
                        return false;
                    } 
                },
                'cancel': function(coords) {
                    var deltaX = coords.x - startX;
                    var offsetRight = window.innerWidth - (element[0].offsetLeft + element[0].width);
                    if (offsetRight >=0){
                        var currentMarginLeft = window.innerWidth - element[0].width;
                        element[0].style.marginLeft = currentMarginLeft + "px";
                        return false;
                    } 
                    if (element[0].offsetLeft >=0){
                        element[0].style.marginLeft=0;
                        return false;
                    } 
                }
                });
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
09.06.2014, 13:02
Ответы с готовыми решениями:

Движение объекта за мышкой с заданной скоростью
Привет. Собственно вопрос, как сделать движение объекта за мышкой с заданной скоростью, да так,...

Как остановить движение объекта на onMouseOut
На onMouseMove в зависимости движении курсора двигаются объекты в диве. <!DOCTYPE HTML> <html>...

Движение картинки мышкой
Товарищи. Есть картинка, надо чтобы наведя на неё и нажав левую кнопку мыши можно было её...

Выпадающее изображение и движение за мышкой
Приветствую. Сразу скажу что в Java я полнейший ноль, то о чем я сейчас хочу спросить, это первое,...

5
Superposition
946 / 612 / 256
Регистрация: 27.10.2013
Сообщений: 2,082
09.06.2014, 14:15 2
Цитата Сообщение от Johnlion Посмотреть сообщение
а как сделать плавное движение картинки?
Попробуйте jQ UI. В директиву, по умолчанию, попадает облегченная версия jQ, но если подключите эту библиотеку самостоятельно до Angular , то в вашем распоряжении будет полный функционал доступный через Element.
0
63 / 3 / 1
Регистрация: 11.05.2011
Сообщений: 666
09.06.2014, 17:21  [ТС] 3
Padimanskas, а без jQ и только на ангулар и чистом JS то как?
0
80 / 80 / 53
Регистрация: 22.03.2013
Сообщений: 270
09.06.2014, 19:42 4
Может это вам поможет: http://learn.javascript.ru/drag-and-drop
0
Эксперт JSЭксперт HTML/CSS
2426 / 1105 / 309
Регистрация: 23.06.2011
Сообщений: 3,471
09.06.2014, 21:45 5
Цитата Сообщение от Johnlion Посмотреть сообщение
зажимаю мышку на картинке - двигаю картинку влево-вправо - она двигается с запаздыванием, а как сделать плавное движение картинки?
один из вариантов
HTML5
1
2
3
<img id="DnD_el1" src="dnd_pic/m0.gif" alt="2я" style="position:absolute; top:300px; left:150px; cursor:move;" width="80" height="80">
 
<img id="DnD_el2" src="dnd_pic/g0.gif" alt="3я" style="position:absolute; top:300px; left:250px; cursor:move;" width="80" height="80" border="1">
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
var elY, elX, obj, zIn=5;
document.onmousedown=mDown;
document.onmouseup=mUp;
 
function mDown(ev){
if(ev){
obj=ev.target;
//если у элемента есть ИД с таким префиксом, если нет, проходим мимо
if(obj.id.indexOf("DnD_el")==0){
document.onmousemove=mMove;
elX=ev.clientX-parseInt(obj.style.left);
elY=ev.clientY-parseInt(obj.style.top)}}
else{
obj=event.srcElement;
if(obj.id.indexOf("DnD_el")==0){
document.onmousemove=mMove;
elY=event.offsetY;
elX=event.offsetX}};
obj.style.zIndex=zIn++;
return false;
 };
 
function mMove(ev){
var y, x;
if(ev){x=parseInt(ev.clientX); y=parseInt(ev.clientY)}
else{x=event.clientX; y=event.clientY};
obj.style.left=x-elX+"px";
obj.style.top=y-elY+"px";
return false;
 };
 
function mUp(){document.onmousemove=null};
0
63 / 3 / 1
Регистрация: 11.05.2011
Сообщений: 666
10.06.2014, 10:20  [ТС] 6
newJS, спасибо большое вставил на сайт, работает, но тоже подтормаживает. что делать?
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
10.06.2014, 10:20

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

движение объекта
Всем привет. Скажу сразу в javascript я ещё понимая очень мало. Столкнулся с такой проблемой. Не...

Движение объекта
Вот код который двигает объект. Как сделать чтобы функция включалась только по нажатии клавиши...

Движение объекта
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;script...

Движение объекта в канвасе
Вот этим кодом создается объект в канвасе: function b() { cv = document.getElementById(&quot;a&quot;);...


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

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

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