2012-01-22 3 views
1

Я играл с веб-сайта по адресуКак работает следующий опрокидывание мыши?

http://jsfiddle.net/deltanovember/h63Vx/3/

код для кнопки отправки следующим

<input class="ka-form-submit" type="submit" name="contact" value="Submit" /> 

То, что я не понимаю, как опрокидывание эффект достигается. В развитии «старой школы» это было бы сделано с onMouseOver или аналогичным. Однако я не вижу кнопку, связанную с каким-либо JavaScript вообще. Я знаю, что JavaScript задействован, потому что, когда я удаляю файлы сценариев, опрокидывание перестает работать. Я просто не могу найти ссылку.

ответ

1

быстрый взгляд под капотом с Firebug показал, что непрозрачность кнопки изменяется, когда Мышки пользователя над кнопкой:

opacity: 1; 

плавно меняется на:

opacity: .7; 

Посмотрите на файл karma.js, и вы увидите это в разделе «Наведение кнопок»:

TTjquery(document).ready(function(){ 
    TTjquery(".ka_button, #ka-submit, #searchform #searchsubmit, .ka-form-submit, #mc_signup #mc_signup_submit, .fade-me") 
     .hover(
      function(){ 
       TTjquery(this) 
        .stop() 
        .animate({opacity:0.7},250) 
      }, 
      function(){ 
       TTjquery(this) 
        .stop() 
        .animate({opacity:1.0},250) 
      } 
     ); 
}); 
0

Я предполагаю, что файлы .js захватывают события на странице. Когда происходит событие отправки, или onclick или onmouseover или что-то еще для имени этой формы или элемента формы, как определено в файле JS в сравнении с самим элементом, он вызывает некоторые действия. Я буду честен; Я не читал JS, чтобы проверить это, но мне хорошо догадываться.

0

Эта страница включает в себя кучу плагинов jQuery. Нажмите «управлять ресурсами», чтобы увидеть, что включено. Многие из них минимизированы, так что это немного боль, чтобы рассказать обо всем. Один из них должен прикрепить анимацию мыши на javascript на лету. Анимация плавно уменьшает непрозрачность при наведении курсора мыши для создания эффекта мыши.

0

Ev могут быть добавлены в элементы dom через JavaScript. jQuery упрощает это.

в чистом JS, общие методы:

domnode.onmouseover = somefunc; 
function somefunc(e) { 
    ... 
} 

-и-

if (domnode.addEventListener) { 
    domnode.addEventListener('mouseover', somefunc, false); 
} else { 
    domnode.attachEvent('onmouseover', somefunc); 
} 

Это хорошо, потому что он переместил функциональности контента, таким образом, что согласуется с MVC (HTML - это модель, CSS - это представление, JS - это контроллер).

JQuery упрощает еще дальше, позволяя вам выбрать узел и прикрепить событие:

$(selector).mouseover(somefunc); 

дополнительно JQuery нормализует привязок событий и объект события, так что вы можете иметь последовательный опыт кросс-браузер ,

Смежные вопросы