Có nhiều thanh trượt vuốt bằng JavaScript hoặc CSS ở ngoài nhưng tất cả dường như chỉ cho phép vuốt ngang hoặc dọc của trang trình bày. Có điều gì ở đó cho phép cả hai trên một trang trình bày, vì vậy tôi có thể vuốt ngang và dọc trên một trang trình bày?Thanh trượt vuốt cảm ứng hai hướng cho cả ngang và dọc
Tôi không chắc chắn 100% nếu đây là những gì bạn đang tìm kiếm, nhưng có vẻ darn gần:
iDangero.us Swiper.
http://www.idangero.us/sliders/swiper/
Cho phép hộp swping dọc trong một băng chuyền ngang/trượt. Tôi đã tìm kiếm cùng một thứ trong một thời gian, và đây là plugin gần nhất tôi đã tìm thấy những gì tôi đang tìm kiếm. Một chút hack/thao tác có thể làm cho nó làm những gì bạn đang tìm kiếm.
Bạn có thể sử dụng fullPage.js để thực hiện thao tác vuốt chính xác như mô tả, như được hiển thị trên this demo page.
Vấn đề duy nhất tôi gặp phải với fullPage.js là thiếu chuyển động chạm 1: 1. Vì vậy, thay vì vuốt được kiểm soát miễn là bạn có ngón tay của bạn trên màn hình, kịch bản có một biến cấu hình cho biết một lần một swipe ngưỡng của X phần trăm chiều cao màn hình/chiều rộng đã được đáp ứng. Điều này làm việc, nhưng không cảm thấy gần như tốt đẹp như một cái gì đó như RoyalSlider mà có chuyển động cảm ứng 1: 1; vì vậy nếu bạn chỉ vuốt 49% cách bạn vẫn ở trên cùng một phần. Điều đó nói rằng fullPage.js có hỗ trợ tuyệt vời (IE8 +) và được cập nhật thường xuyên.
Lý tưởng nhất là tôi muốn fullPage.js là have 1:1 touch movement, tác giả mở để yêu cầu kéo nhưng bây giờ kiến thức về javascript của tôi quá cơ bản để thực hiện một cái gì đó như thế này.
Tùy chọn tôi đang xem xét tại thời điểm này đang sử dụng hai thanh trượt kết hợp với nhau. Tôi sẽ sử dụng RoyalSlider cho các thao tác vuốt sang trái và sang phải (để bạn có được chạm 1: 1) và fullPage.js cho hiệu ứng dọc lên xuống.
Đây là một cách dễ dàng của clreating ngang và dọc trượt
<script>
function MM_effectSlide1(targetElement, duration, to, from, slide, toggle)
{
Spry.Effect.DoSlide(targetElement, {duration: duration, to: to, from: from, horizontal: true, toggle: true});
}
function MM_effectSlide2(targetElement, duration, to, from, slide, toggle)
{
Spry.Effect.DoSlide(targetElement, {duration: duration, to: to, from: from, horizontal: false, toggle: true});
}
</script>
<body>
<div id="socialmedia" class="socialcontainer" onclick="MM_effectSlide1('socialmedia', 1000, '100%', '11%', true, true)"></div>
Nếu bạn nhìn vào Bộ luật mã duy nhất mà nên được thay đổi là MM_effectSlide1, 2, 3, và vân vân
Bất kỳ cập nhật về điều này? Bạn có tìm thấy bất kỳ thanh trượt nào với hành vi này không? – briler
@briler Tôi ngay lập tức nghĩ đến [kẻ lừa đảo idangero.us] (http://www.idangero.us/sliders/swiper/), nhưng điều đó đã được đề cập trong một câu trả lời. Bạn có thể mô tả những gì nó là bạn cần thêm một chút chi tiết? Tôi không thể khái niệm hóa những gì bạn đang tìm kiếm. Cảm ơn. –