Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.57/21: Рейтинг темы: голосов - 21, средняя оценка - 4.57
30 / 30 / 4
Регистрация: 04.01.2012
Сообщений: 130
1

Движение картинки мышкой

06.03.2012, 17:18. Просмотров 4361. Ответов 6
Метки нет (Все метки)

Товарищи.
Есть картинка, надо чтобы наведя на неё и нажав левую кнопку мыши можно было её крутить. Как это вообще можно реализовать?
Если есть у кого код, поделитесь.
Думаю как-то через html5 с помощью Canvas можно. Но как?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.03.2012, 17:18
Ответы с готовыми решениями:

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

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

Как ускорить движение объекта мышкой?
http://beta.maquetter.com/client зажимаю мышку на картинке - двигаю картинку влево-вправо - она...

Движение картинки
Здравствуй,уважаемые форумчане! Недавно Меня резко потянуло на язык программирование Java Script,а...

6
Просто любитель
624 / 462 / 120
Регистрация: 20.01.2011
Сообщений: 865
Записей в блоге: 2
06.03.2012, 17:32 2
Почитайте тут про drag-n-drop. Подробно с примерами.
Что касается поворота, вот в этой теме есть несколько примеров, где поворачиваются объекты средствами CSS3.
2
30 / 30 / 4
Регистрация: 04.01.2012
Сообщений: 130
06.03.2012, 17:39  [ТС] 3
Цитата Сообщение от GuardCat Посмотреть сообщение
Почитайте тут про drag-n-drop. Подробно с примерами.
Что касается поворота, вот в этой теме есть несколько примеров, где поворачиваются объекты средствами CSS3.
При помощи css 3 я крутанул. Но она потом обратно откатывает, а как бы это положение сохранить так ещё и в зависимости от градуса поворота выполнить какую-нибудь функцию
0
30 / 30 / 4
Регистрация: 04.01.2012
Сообщений: 130
06.03.2012, 19:21  [ТС] 4
Сделал через канвас:
HTML5
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Transformation test</title>
        <style type="text/css">
html {
    background : white;
    color      : black;
}
input[type=text] {
    border : none;
    border-bottom : 1px dashed #999;
    font : 15px monospace;
    margin : 2px;
    width : 4em;
    text-align : right;
}
canvas {
    border : 1px dashed #393;
    margin : 4px;
}
        </style>
    </head>
 
 
 
 
 
 
 
    <body>
 
<div>
     <input id="play" type="button" value="Play" />
     <input id="pause" type="button" value="Pause" />
     <span id="duration"> </span>
 </div>
 <div>
     Громкость:
     <input id="volume" type="range" min="0" max="10" value="5" />
 </div>
<audio src="sekret-privet.mp3"> 
        HTML5 audio not supported
    </audio>
 
        <canvas id="canvas" width="640" height="400" />
 
 
    </body>
 
 
 
 
 
    <script type="text/javascript">
 // Создаем новый объект Audio
 var audio = new Audio('sekret-privet.mp3');
 
 // Добавляем к кнопке с идентификатором "play" обработчик события onclick, внутри которого вызывается метод play
var play = document.getElementById('play');
 play.addEventListener('click', function(){
     audio.play();
 }, false);
 
 // Находим кнопку и прикрепляем метод на событие onclick
 var pause = document.getElementById('pause');
 pause.addEventListener('click', function(){
     audio.pause();
 }, false);
 
 // Найти HTML5-элемент input типа range и добавить обработчик события onchange для настройки звука
 var volume = document.getElementById('volume');
 volume.addEventListener('change', function(){
     audio.volume =ctx.rotate(Math.atan2(y - 200, x - 280) + Math.PI/2);
 }, false);
 
 // Добавить обработчик события timeupdate для вывода времени воспроизведения
 audio.addEventListener("timeupdate", function() {
     var duration = document.getElementById('duration');
     var s = parseInt(audio.currentTime % 60);
     var m = parseInt((audio.currentTime / 60) % 60);
     duration.innerHTML = m + '.' + s + 'sec';
 }, false);
 
 
 
(function (undefined) {
    var $ = function (id) {
        return document.getElementById(id);
    };
    var drawCells = function (ctx, size) {
        size = size || 100;
        var canv = ctx.canvas;
        var w = ctx.canvas.width, h = ctx.canvas.height;
        var count = Math.ceil(Math.max(w, h) / size);
        ctx.save();
        ctx.beginPath();
        do {
            var line = count * size;
            ctx.moveTo(line, 0);
            ctx.lineTo(line, h);
            ctx.moveTo(0, line);
            ctx.lineTo(w, line);
        } while (count--);
        ctx.closePath();
        ctx.lineWidth = 0.3;
        ctx.strokeStyle = '#090';
        ctx.stroke();
        ctx.restore();
    };
    var draw = function (x, y) {
        var ctx = $('canvas').getContext('2d');
        ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
        drawCells(ctx, 80);
        ctx.save();
        ctx.translate(280, 200);
        ctx.rotate(Math.atan2(y - 200, x - 280) + Math.PI/2);
        ctx.drawImage(img, -187, -187);
        ctx.restore();
    };
    var img = new Image;
    img.src = 'rychka.png';
    img.onload = function () { draw() };
    $('canvas').onmousemove = function (e) {
        var k = [];
        for (var i in e.target) k.push(i);
        draw(
            e.pageX - e.target.offsetLeft,
            e.pageY - e.target.offsetTop
        );
    };
})();
    </script>
</html>
А теперь вопрос на миллион, как-то можно передать в ползунок значения градусов поворота ручки?
Вообщем как-то их связать, поворачиваешь картинку - меняется громкость.
0
Миниатюры
Движение картинки мышкой  
30 / 30 / 4
Регистрация: 04.01.2012
Сообщений: 130
06.03.2012, 20:24  [ТС] 5
в громкости что-то не то вставилось, там:

Javascript
1
2
3
4
var volume = document.getElementById('volume');
 volume.addEventListener('change', function(){
     audio.volume = parseFloat(this.value / 10);
 }, false);
Добавлено через 49 минут
всё товарищи догадался, как связать. осталось только нормально связать!)
0
20 / 21 / 3
Регистрация: 04.09.2011
Сообщений: 185
07.03.2012, 12:57 6
Технология "drag and drop javascript"

CSS
1
2
3
4
5
<style>
<!--
.drag{position:relative;cursor:move}
-->
</style>
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
<script language="JavaScript1.2">
<!--
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft= temp1+event.clientX-x
z.style.pixelTop= temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>
Изучи код, он достаточно прост для понимания.
1
30 / 30 / 4
Регистрация: 04.01.2012
Сообщений: 130
07.03.2012, 13:13  [ТС] 7
Цитата Сообщение от anateron Посмотреть сообщение
Технология "drag and drop javascript"

CSS
1
2
3
4
5
<style>
<!--
.drag{position:relative;cursor:move}
-->
</style>
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
<script language="JavaScript1.2">
<!--
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft= temp1+event.clientX-x
z.style.pixelTop= temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>
Изучи код, он достаточно прост для понимания.
окей.

Всем спасибо за то, что откликнулись.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
07.03.2012, 13:13

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

Движение персонажа (картинки)
Есть у меня такое задание: написать веб-платформер с использованием html, css, php, js. Вопрос...

Движение картинки за курсором
Есть скрипт, написан вроде правильно, но почему то не хочет работать (ошибка по ходу глупая),...

Движение картинки по траектории JS
Есть треугольник который расположен в нижнем правом углу, есть шарик который начинает движение от...

Движение картинки по ломанной траектории
еще раз убеждаюсь, что для элементарных вещей на ЯваСкрипт приходится ломать голову. Задача:...


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

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

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