Vuốt chạm CSS

Nhận dạng cử chỉ trên màn hình cảm ứng đơn giản bằng JavaScript thuần túy để phát hiện thao tác vuốt lên, xuống, trái và phải bằng một con trỏ. Sẽ rất hữu ích khi vuốt để hiển thị/ẩn menu [vuốt trên e. mục tiêu] hoặc gạt sang trái/phải để kiểm soát vị trí trình chiếu

Cách tạo tính năng phát hiện vuốt chạm bằng JavaScript thuần túy

1. Trước hết, tạo cấu trúc HTML như sau

 

Swipe to Detect Gestures
[touchscreen only]

Swipe here

2. Sau đó, thêm các kiểu CSS sau vào dự án của bạn

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  color: #1c5706;
  background: #013;
  position: fixed;
  top: 0;
  left: 0;
}
h1, div {
  text-align: center;
  transition: opacity .5s ease-in-out;
}
#surface{
    width: 100%;
    height: 360px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    margin: 14px 0;
}

3. Cuối cùng, thêm đoạn mã JavaScript sau và hoàn tất

var gesture = {
      x: [],
      y: [],
      match: ''
    },
    tolerance = 100,
    output = document.getElementById['output'];

var surface = document.getElementById['surface'];

surface.addEventListener['touchstart',function[e]{
  e.preventDefault[]
  for [i=0;i

Chủ Đề