Как сайт "дай мне Google для тебя" создает анимированную мышь? - PullRequest
4 голосов
/ 03 августа 2009

Как заставить анимированную мышь перемещаться по экрану и нажимать кнопку?

Это было бы хорошо для демонстрационных целей!

В идеале это было бы в javascript и / или jQuery.

РЕДАКТИРОВАТЬ: есть гигантский файл javascript, который вызывает страница, и мне понадобится много времени, чтобы разобрать и понять. Вот почему я спрашиваю

Ответы [ 4 ]

14 голосов
/ 03 августа 2009
 function googleItForThem() {
    if ($.getQueryString({ id: "fwd" })) redirect();

    $("body").css("cursor", "wait");
    fakeMouse.show();
    instruct("play.step_1");

    fakeMouse.animate({
      top:  (inputField.position().top  + 15).px(),
      left: (inputField.position().left + 10).px()
    }, 1500, 'swing', function(){
      inputField.focus();
      fakeMouse.animate({ top: "+=18px", left: "+=10px" }, 'fast', function() { fixSafariRenderGlitch(); });
      type(searchString, 0);
    });

    function type(string, index){
      var val = string.substr(0, index + 1);
      inputField.attr('value', val);
      if (index < string.length) {
        setTimeout(function(){ type(string, index + 1); }, Math.random() * 240);
      }
      else {
        doneTyping();
      }
    }
4 голосов
/ 03 августа 2009

Как это происходит, lmgtfy фактически реализует это с помощью JavaScript и jQuery. Почему бы не прочитать его источник?

0 голосов
/ 03 августа 2009

Глядя на источник, они просто используют jQuery animate для перемещения <img> элемента вокруг.

0 голосов
/ 03 августа 2009

Попробуйте переместить изображение 24x24 по экрану, а затем используйте (как вы уже догадались) изображение курсора мыши в формате 24x24 GIF.

Когда изображение прибывает в место назначения, вызовите обработчик нажатия кнопки. Все это можно легко сделать с помощью jQuery и jQuery UI.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...