MouseOver или hover () или css () для изменения положения - PullRequest
Новая
       29

MouseOver или hover () или css () для изменения положения

0 голосов
/ 13 октября 2011

У меня есть изображение на моей странице, и я хочу, чтобы оно меняло положение при наведении курсора мыши или при щелчке, поэтому я попробовал несколько вещей, но не могу найти правильное начало.

Итак, я начал менять верхнюю позицию, но это не работает, я хотел бы, чтобы при наведении курсора мыши на изображение оно переходило в положение x / y (возможно, в произвольном порядке x / y), если при наведении мыши на него снова, оно перейдет в другую позицию. . 

  $('#image').one('click', function () {
     $(this).css( 'top' : '+=200' );
  });

Но это не работает, так что, пожалуйста, кто-нибудь может дать мне некоторую информацию, чтобы я мог понять, что делать?

Ответы [ 2 ]

1 голос
/ 13 октября 2011

Обратите внимание, что при установке значений top, jQuery не будет автоматически получать значение top, установленное ранее, и добавляет к нему 200 (как обычный язык программирования). Вы могли бы увидеть это как ошибку при выполнении, если попытаетесь увидеть в консоли. Вы можете сначала получить значение top, а затем добавить к нему 200px и затем установить его снова.

Это должно работать: 

$('#image').one('click', function () {
  var top = parseInt($(this).css("top"));
  $(this).css( 'top' , top+ 200);
});

Мне пришлось проанализировать строку в целое число, возвращаемое css, вы также можете заменить эту дополнительную операцию некоторым методом, который возвращает только значение, а не значение с добавленным к нему «px», не знаю, если он есть уже.

0 голосов
/ 13 октября 2011

Попробуйте что-то вроде этого: 

<html>
    <head>
        <script type="text/javascript">
            function switchPos(obj) 
            {
                var divobj = document.getElementById('div1')
                var x = divobj.offsetHeight - obj.height - 5;
                var y = divobj.offsetWidth - obj.width - 5;

                var randomx = Math.floor(Math.random()*x+1);
                var randomy = Math.floor(Math.random()*y+1);

                obj.style.top = randomx + 'px';
                obj.style.left = randomy + 'px';
            }
        </script>
    </head>
    <body>
        <div id="div1" style="width: 800px; background: red;">
            <img src="image.jpg" style="position:relative;" onmouseover="switchPos(this);" onmouseout="switchPos(this);"/>
        </div>
    </body>
</html>
...