Как этот сайт делает парящие эффекты?

Question

Пожалуйста, посмотрите на http://shaiya.aeriagames.com/ и скажите мне, как они влияют на логотип при наведении курсора, поскольку он не является JavaScript и работает во всех браузерах

Answer 1

Это использует Javascript.Если вы используете Firebug и смотрите на изображение, вы можете ясно видеть, что другое изображение было наложено поверх исходного изображения с помощью свойства CSS opacity.Оба изображения прикреплены как фоновые изображения к двум различным элементам.При наведении указателя мыши на родительский элемент li с идентификатором gameLogo, его непрозрачность дочернего элемента привязки начинает увеличиваться с 0 до 1, вызывая «свечение», поскольку оба изображения идеально выровнены.

Вы можете увидеть наложенное изображение здесь: http://shaiya.aeriagames.com/themes/shaiya/images/site/page-header-light-hovers.jpg

Answer 2

Это javascript - использование библиотеки mootools.Просмотрите исходный код страницы, и вы увидите внизу, что этот бит кода

<script type="text/javascript" src="http://s.aeriagames.com/modules/js/mootools-1.2.4-core.js"></script>...<script type="text/javascript" src="http://s.aeriagames.com/themes/shaiya/js/page.js"></script> 

http://s.aeriagames.com/themes/shaiya/js/page.js - это скрипт, который реализует функциональность, где http://s.aeriagames.com/modules/js/mootools-1.2.4-core.jsэто библиотека mootools.