#javascript #html #css #electron
Вопрос:
Я работаю над проектом, в котором мне нужно отключить все сенсорные жесты, кроме щепотки для увеличения, и масштабирование должно вернуться к 100% через несколько секунд.
Это проект, выполненный в electron.js
Я попытался интегрировать Hammer.js но я не понимаю, как это работает.
Кто-нибудь может, пожалуйста, протянуть мне руку помощи? Спасибо!
Это в основном сверхширокое панорамное изображение, которое вы можете прокручивать горизонтально с помощью поворотного энкодера. Это прекрасно работает!
Но теперь я хотел бы реализовать функцию масштабирования, не позволяя перемещать или прокручивать изображение с помощью сенсорных жестов.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<link rel="stylesheet" href="grimm.css">
</head>
<body style="background: white;">
<div id="scroller">
<div class="scrolling-box">
<table cellpadding="0" cellspacing="0">
<tr>
<td><img loading = "lazy" alt=" " src="images/slice_0_0.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_1.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_2.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_3.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_4.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_5.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_6.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_7.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_8.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_9.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_10.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_11.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_12.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_13.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_14.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_15.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_16.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_17.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_18.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_19.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_20.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_21.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_22.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_23.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_24.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_25.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_26.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_27.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_28.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_29.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_30.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_31.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_32.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_33.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_34.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_35.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_36.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_37.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_38.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_39.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_40.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_41.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_42.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_43.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_44.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_45.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_46.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_47.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_48.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_49.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_50.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_51.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_52.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_53.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_54.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_55.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_56.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_57.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_58.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_59.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_60.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_61.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_62.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_63.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_64.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_65.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_66.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_67.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_68.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_69.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_70.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_71.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_72.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_73.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_74.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_75.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_76.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_77.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_78.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_79.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_80.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_81.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_82.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_83.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_84.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_85.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><a href="#"><img loading = "lazy" alt=" " src="images/slice_0_86.jpg" style="width: 100vh; height: 100vh; border-width: 0px;"></a></td>
<td><img loading = "lazy" alt=" " src="images/slice_0_87.jpg" style="width: auto; height: 100vh; border-width: 0px;"></td>
</tr>
</table>
</div>
</div>
<!--script type="text/javascript" src="hammer.js"></script>
<script type="text/javascript" src="touch.js"></script-->
</body>
</html> Комментарии:
1. У вас есть какой-нибудь код?
2. css-tricks.com/almanac/properties/t/touch-action
3. @MrT Я попробовал использовать css, и я могу управлять жестами касания, но я хотел бы вернуть масштабирование к исходному размеру (например, масштабирование Instagram).
4. @Spectric Shure. Какую часть ты хочешь, чтобы я показал? HTML-код?
5. @PietroManzella HTML был бы хорош. Спасибо