hoverMobile

Hovermobile.js: библиотека JavaScript для моделирования эффекта наклона на мобильное устройство

Эта библиотека JavaScript имитирует эффект падения на мобильные устройства с указателем только путем перемещения пальца на ЖК -дисплей.

Пример 1	Пример 2

См. Пример на вашем мобильном устройстве по адресу http://www.gabrielconceicao.com/hovermobile или проверьте эту библиотеку, работающую на моем веб -сайте: http://www.gabrielconceicao.com/

Как это работает?

Когда пользователь очень быстро нажимает на ЖК -дисплей три раза, появится указатель, и он сможет перемещать палец к элементу с некоторым эффектом падения и увидеть этот эффект, как на рабочем столе. Если элемент имеет какой -то код JavaScript "на парижке", он тоже будет работать с слушателем. Когда он перестает нажимать на ЖК -дисплей, указатель исчезает.

Единственные три вещи, необходимые для работы, - это:

• Добавьте эту библиотеку на свой сайт;
• Определите класс.
• На ваших слушателях, определите события Touchenter и TouchLeave.

Библиотека запустит событие Touchenter, когда он будет зависать элемент и стрелять в TouchLeave, когда он покинет элемент.

The: Hover CSS Pseudo Class Effect: Как это работает в мобильной связи с этой библиотекой?

Создайте класс. Hover в вашем файле StyleShipship, чтобы моделировать эффект: Hover. Все, что вам нужно сделать, это повторить содержание этого псевдо класса в класс. Пример:

 button:hover{
	background-color: red;
}

Все, что вам нужно сделать, это создать новый класс, как это:

 button.hover{
	background-color: red;
}

JavaScript: С этой библиотекой что необходимо для мероприятия Mouseover, работая на мобильных устройствах?

Просто определить события Touchenter и TouchLeave в Elements, и библиотека запустит события.

Пример:

 $('button').on('mouseover touchenter', function(e) {
	// make something cool on hover
});

$('button').on('mouseleave touchleave', function(e) {
	// make something cool on leave
});

Варианты и интриализация

Вы можете начать эту библиотеку, вызывая функцию начала с помощью этих параметров:

	<script type="text/javascript">
		gO.ready( function(){
			hoverMobile.start({
				pointerEl: '.pointer',	
				animateEls: 'a,button,.more',	
				hideAfterTouch: true,
				showPointer: true,
				pointerOffsetX: 20,
				pointerOffsetY: 70,		
				delayPointer: 200,			
				fireHoverEvent: true,
				applyHoverCssEffect: true,	
				hoverClassName: 'hover',
			});
		});
	</script>

Параметр «Анимател» определяет, какие элементы DOM будут отображать эффект.

См. Пример реализации: https://github.com/gabrielpconceicao/hovermobile/blob/master/index.html#l33

Эта библиотека зависит от GO.Library. Для получения дополнительной информации об этом см.

#В процессе разработки