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

перемещение элемента

15.09.2013, 21:01. Просмотров 1798. Ответов 1
Метки нет (Все метки)

Как правильно сделать перемещение дива по экрану при нажатии кнопки ?
Я допер что получая свойство css оно является строкой с окончанием "px" который мешает перемещать динамически. Как сделать правильно, пока не понял. Задал абсолютное позиционирование для дива , получаю его свойство позиции сверху,а дальше оказывается оно не число а текст. Получается надо использовать регулярные выражения для отрубления текста или можно как то проще? Вот моя попытка
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
<html>
<head>
    <title>Move</title>
<script language = "JavaScript">
<!--
    function move(){
        var y = document.getElementById('knopka').style.top;
        if(y==0){
            y = 100;
            alert(0);
            knopka.style.top +=  y;
        }
        else if(y == '100px'){
            alert('NOT NULL'+' '+y);
        }   
    }
    
    function view(){
    if(knopka.style.display=="none")
    knopka.style.display="block";
    else
    knopka.style.display="none";
    }
-->
</script>
 
<style>
    #knopka{
        position: absolute;
        right: 0;
        top: 0;
        display:block;
        width:50px;
        height:50px;
        padding:2px 10px 2px 10px;
        -webkit-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Safari 3.0 */
        -moz-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Firefox 3.5 */
        box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для современных браузеров */
        -webkit-border-radius: 10px; /* Радиус скругления для Safari 3.1 */
        -moz-border-radius: 10px; /* Для Firefox 3 */
        border-radius: 10px; /* Радиус скругления для современных браузеров */
        background: #eeece0; /* Цвет фона */
    }
    #knopka:hover{
        display:block;
        width:50px;
        height:50px;
        color:#fff;
        padding:2px 10px 2px 10px;
        -webkit-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Safari 3.0 */
        -moz-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Firefox 3.5 */
        box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для современных браузеров */
        -webkit-border-radius: 10px; /* Радиус скругления для Safari 3.1 */
        -moz-border-radius: 10px; /* Для Firefox 3 */
        border-radius: 10px; /* Радиус скругления для современных браузеров */
        background: #0000ff; /* Цвет фона */
        cursor: pointer;
    }
</style>
</head>
 
<body>
<form>
    <input type = "button" value = "Move" onClick="move()">
    <input id="button" type="button" onclick="view()" value="Скрыть/Показать" />
</form>
<div id="knopka" ></div>
</body>
</html>
Добавлено через 3 часа 1 минуту
Спасибо за помощь))) Короче вот решение, которое смог найти через справочники. Уверен, что оно не самое правильно, но работает и явно многим пригодится. Правда в IE не всяком работает.

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
<html>
<head>
    <title>Move</title>
<script language = "JavaScript">
<!--
    function move(){
        var sKnopka = getComputedStyle(knopka, '');
        // Замена строки на число через функцию replace!
        var str = sKnopka.top;
        var s = str.replace("px","")
        //преобразование в число
        var num = Number(s);
        
        //логика
        num +=20;
        knopka.style.top = num+'px' ;
        
    }
    
    function view(){
    if(knopka.style.display=="none")
    knopka.style.display="block";
    else
    knopka.style.display="none";
    }
-->
</script>
 
<style>
    #knopka{
        position: absolute;
        right: 0px;
        top: 0px;
        display:block;
        width:50px;
        height:50px;
        padding:2px 10px 2px 10px;
        -webkit-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Safari 3.0 */
        -moz-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Firefox 3.5 */
        box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для современных браузеров */
        -webkit-border-radius: 10px; /* Радиус скругления для Safari 3.1 */
        -moz-border-radius: 10px; /* Для Firefox 3 */
        border-radius: 10px; /* Радиус скругления для современных браузеров */
        background: #eeece0; /* Цвет фона */
    }
    #knopka:hover{
        display:block;
        width:50px;
        height:50px;
        color:#fff;
        padding:2px 10px 2px 10px;
        -webkit-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Safari 3.0 */
        -moz-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Firefox 3.5 */
        box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для современных браузеров */
        -webkit-border-radius: 10px; /* Радиус скругления для Safari 3.1 */
        -moz-border-radius: 10px; /* Для Firefox 3 */
        border-radius: 10px; /* Радиус скругления для современных браузеров */
        background: #0000ff; /* Цвет фона */
        cursor: pointer;
    }
</style>
</head>
 
<body>
<form>
    <input type = "button" value = "Move" onClick="move()">
    <input id="button" type="button" onclick="view()" value="Скрыть/Показать" />
</form>
<div id="knopka" ></div>
</body>
</html>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
15.09.2013, 21:01
Ответы с готовыми решениями:

Перемещение элемента
Почему строка 20 возвращает NaN в переменной x? &lt;DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta...

Перемещение элемента с задержкой
Всем привет. Решил сделать плавное перемещение объекта для старых версий HTML (без jQuery), но...

Перемещение элемента в координаты клика мышки
Здравствуйте. Моя задача переместить элемент в координаты клика мышки. Т.е. пользователь кликает...

Перемещение элемента в дереве элементов
Возникла проблема. Следующий jQuery код: if(!window) load_js(); ...

1
супермизантроп
Эксперт JS
3722 / 2858 / 678
Регистрация: 18.04.2012
Сообщений: 8,446
16.09.2013, 02:39 2
проблема никак не в том, что якобы "свойство css является строкой с окончанием "px" который мешает перемещать динамически"

если бы вы сразу после строки #7 вашего первого кода прописали alert (y), то увидели, что выдаваемое окошко пустое
и там, разумеется, нет никакого 'px', ибо там нет вообще ничего

о сути читайте здесь
в вашем коде изначально правила стиля тегу#knopka прописаны не в самом теге, а в стилевом блоке
поэтому узнать значение этого свойства через объект style нельзя
--------

второй ваш вариант как раз узнаёт текущее значение правила стиля с помощь метода getComputedStyle ()
а для старых версий MSIE надо пользоваться объектом currentStyle
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.09.2013, 02:39

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

Перемещение элемента при скролле
Здравствуйте, есть такой код, $(window).scroll(function() { if ($(this).width() &gt; 1000) { ...

перемещение элемента
Добрый день. Не могли бы вы посказать как сделать так чтобы текст что на картинке перешел вниз ...

Перемещение элемента
Подскажите, пожалуйста, с помощью каких функций можно задать перемещение (по кругу например)...

Перемещение элемента магнитом
Добрый день, уважаемые форумчане! Есть дощечка. На дощечке установлен вертикальный блок весом 50...


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

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

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