Я хочу сделать страницу с эффектом события Click и Hold, например http://andeinerseite.video/ или http://2016.makemepulse.com/. Меня интересует, какие рамки используют для создания этих эффектов.Нажмите и удерживайте прослушиватель событий с помощью Javascript
Вы можете использовать функцию Javascript setTimeout и связать ее с событиями mousedown. Посмотрите ниже фрагмент коды:
// click and hold event listener
var timeout_id = 0,
hold_time = 1000,
hold_menu = $('.hold_menu'),
hold_trigger = $('.hold_trigger');
hold_menu.hide();
hold_trigger.mousedown(function() {
timeout_id = setTimeout(menu_toggle, hold_time);
}).bind('mouseup mouseleave', function() {
clearTimeout(timeout_id);
});
function menu_toggle() {
hold_menu.toggle();
}ul.hold_menu {
list-style: none;
padding: 0;
margin: 0;
}
ul.hold_menu a, div.hold_trigger {
display: inline-block;
padding: 5px 15px;
border: 1px solid #ccc;
width: 300px;
}
ul.hold_menu a:link, ul.hold_menu a:visited {
color: black;
text-decoration: none;
}
ul.hold_menu a:active, ul.hold_menu a:hover {
background: #ff0;
text-decoration: none;
}
div.hold_trigger {
color: black;
cursor: pointer;
}
div.hold_trigger:hover {
background: #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hold_trigger">Click and hold to toggle the menu</div>
<ul class="hold_menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>Надеется, что это помогает!
'jQuery's setTimeout' ??? – Azamantes
@ Азамантес О! мой плохой, исправленный. –
Большое вам спасибо, хороший пример. –
С простой JavaScript вы можете сделать что-то вроде этого:
selector.addEventListener('mousedown', function(event) {
// simulating hold event
setTimeout(function() {
// You are now in a `hold` state, you can do whatever you like!
}, 500);
}
Вы можете настроить значение 500ms любой TimeSpan соответствует вашим потребностям.
Не уверен, что это реальный фреймворк или что-то, что они сделали сами, но я предполагаю, что основная вещь - это просто начать делать вещи на мероприятии mousedown, а затем остановить его на 'mouseup'. – vlaz
Просмотр источника. –