Jackmoore Phóng 1.7.15: Chuyển đổi zoom trên thiết bị liên lạc với chạm đúp

Question

Sử dụng Zoom bằng Jackmoore: http://www.jacklmoore.com/zoom/ https://github.com/jackmoore/zoom

Tôi muốn sử dụng chạm đúp trên các thiết bị cảm ứng để chuyển đổi hiệu ứng zoom. Lý do là băng chuyền tôi đang sử dụng (OWL Carousel) cho hình ảnh cũng có chức năng vuốt và Zoom hoạt động trên thiết bị cảm ứng bằng cách chạm và kéo hình ảnh, điều này xung đột với thao tác vuốt.

Giống như các trang web Topman làm cho điện thoại di động: http://www.topman.com/en/tmuk/product/clothing-140502/mens-blazers-5369753/black-textured-slim-fit-tuxedo-jacket-5390835?bi=0&ps=20

Đây là liên kết đến tập tin JS: https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js

tôi có thể có được điều này để làm việc trên kích đúp vào một thiết bị liên lạc không:

if (settings.on === 'toggle') { 
       $source.on('dblclick.zoom', 
        function (e) { 
         if (clicked) { 
          stop(); 
         } else { 
          start(e); 
         } 
         clicked = !clicked; 
        } 
       ); 

Nhưng cần phải điều chỉnh mã cho cài đặt cảm ứng, tôi tin rằng thay đổi phần này:

// Touch fallback 
      if (settings.touch) { 
       $source 
        .on('touchstart.zoom', function (e) { 
         e.preventDefault(); 
         if (touched) { 
          touched = false; 
          stop(); 
         } else { 
          touched = true; 
          start(e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]); 
         } 
        }) 
        .on('touchmove.zoom', function (e) { 
         e.preventDefault(); 
         zoom.move(e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]); 
        }) 
        .on('touchend.zoom', function (e) { 
         e.preventDefault(); 
         if (touched) { 
          touched = false; 
          stop(); 
         } 
        }); 
      } 

Có thể thêm người nghe nhấn đúp bằng một cái gì đó như Touchy: https://github.com/yairEO/touchy có thể thực hiện thủ thuật. Tôi đã quản lý để có được nó để nhận ra một vòi nước đôi bây giờ, nhưng không phải để bắt đầu chức năng zoom.

Answer 1

Bạn có thể tự tạo trình xử lý nhấn đúp. Bạn sẽ cần một cái gì đó để theo dõi tốc độ của vòi nước xảy ra.

Khi kết thúc, bạn cần và lưu trữ dấu thời gian và hiểu thời gian trôi qua và nếu bạn muốn xem đây là một lần nhấn đúp.

var stateVar = new Date().getTime(); 
function fnRef(e){ 
    if(new Date().getTime() - stateVar < 300){ 
     e.preventDefault(); 
     // invoke logic here 
    } 
} 

element.addEventListener("touchend", fnRef); 

Điều trên cần được điều chỉnh theo kiểu mã hóa và trường hợp của bạn, nhưng nói chung là logic đằng sau nó.

Lý do tại sao tôi đang sử dụng 300ms làm giá trị so sánh là vì bạn cần phải ngăn chặn hành vi nhấp và gọi thu phóng của bạn tại thời điểm đó. 300ms là khi sự kiện nhấn sẽ gọi nhấp vào đầu mục tiêu của nó (hành vi thông thường của các trình duyệt được sử dụng trong môi trường có thể chạm)