如何制作HTML5旋轉列表/旋轉輪選擇器/選擇器

Question

我的問題是關於用戶ByteHamster給出的答案： 如何使用圖像創建JavaScript / HTML5 Spinner列表？ 在答案中，他/她給出了如何使用html，css和Javascript創建滾動動畫的示例。 動畫允許用戶通過單擊屏幕上所選數字的上方或下方滾動數字，所選數字顯示在動畫下方的div中。

我想知道是否可以做類似的事情，但不是讓圖像上下移動，它可以變成數字輪嗎？ 我的意思是，在上面的例子中，一旦數字達到0，滾動停在一個方向，我想知道是否可以創建一個輪子，用戶可以不斷地從上到下，或從下到上旋轉如果他們願意這樣做。 這需要使用3D交互式動畫軟件嗎？

我已經看到了這個問題： HTML5 / CSS3 - 如何制作“無盡的”旋轉背景 - 360度全景，但我不確定答案是否適用於我的項目，因為它們似乎不是交互式的。

用戶ByteHamster的答案超過3年，我想知道是否有更好的方法來實現html5動畫效果？ 我是否正確認為示例中的Javascript會使某些設備/瀏覽器無法啟用Javascript？ html5方法是否是確保效果適用於大多數設備/瀏覽器的最佳方法？

Answer 1

這是我從提供的信息中匯總的內容...使用鼠標滾輪，滑動並單擊頂部和底部數字。 當然要求無限。 沒有特殊的透視風格（但）我覺得它看起來很不錯。 仍然可以自然選擇。 沒有使用我在評論或requestAnimationFrame鏈接的插件，但jQuery animate()是一個非常好的工具。 該庫具有很好的跨瀏覽器支持（實際上它的強度），它需要的只是一個鏈接，以便JavaScript能夠執行。 您可以使用CDN，此版本也適用於IE8-：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

為了獲得使用鼠標滾輪的最佳跨瀏覽器支持，此插件包括在內：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>

https://plugins.jquery.com/mousewheel/

只是一個基本的父母和造型與每個數字的跨度，一些前置的情況下升。

 $(function() { var gate = $(window), cog = $('#rotator'), digit = cog.find('span'), field = $('#result'), slot = digit.height(), base = 1.5*slot, up, swipe; if (document.readyState == 'complete') interAction(); else gate.one('load', interAction); function interAction() { field.text(0); cog.scrollTop(base).fadeTo(0,1).mousewheel(function(turn, delta) { if (isBusy()) return false; up = delta > 0; nextNumber(); return false; }); digit.on('touchstart', function(e) { var begin = e.originalEvent.touches[0].pageY; digit.on('touchmove', function(e) { var yaw = e.originalEvent.touches[0].pageY-begin; up = yaw < 0; swipe = Math.abs(yaw) > 30; }); gate.one('touchend', function() { digit.off('touchmove'); if (swipe && !isBusy()) nextNumber(); }); }) .on('mousedown touchstart', function(e) { if (e.which && e.which != 1) return; var zest = this, item = $(this).index(); $(this).one('mouseup touchend', function(e) { digit.off('mouseup'); var quit = e.originalEvent.changedTouches; if (quit) var jab = document.elementFromPoint(quit[0].clientX, quit[0].clientY); if (swipe || item == 2 || quit && jab != zest || isBusy()) return; up = item == 1; nextNumber(); }); return false; }) .mouseleave(function() { digit.off('mouseup'); }); } function isBusy() { return cog.is(':animated'); } function nextNumber() { var aim = base; swipe = false; up ? aim += slot : aim -= slot; cog.animate({scrollTop: aim}, 250, function() { up ? digit.eq(0).appendTo(cog) : digit.eq(9).prependTo(cog); digit = cog.find('span'); cog.scrollTop(base); field.text(digit.eq(2).text()); }); } }); 

 body { background: grey; } #ticker { width: 150px; text-align: center; margin: auto; } #rotator { height: 140px; font-family: "Times New Roman"; font-size: 50px; line-height: 70px; background-image: url(http://ataredo.com/external/image/flip.png), url(http://ataredo.com/external/image/flip.png), url(http://ataredo.com/external/image/flip.png); background-position: 0 0, 50% 50%, 100% 150%; background-size: 300% 50%; background-repeat: no-repeat; margin: 0 0 10px; overflow: hidden; opacity: 0; } #rotator span { width: 100%; height: 50%; display: inline-block; cursor: default; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; } #result { height: 30px; font-size: 20px; color: white; line-height: 30px; letter-spacing: 3px; -webkit-box-shadow: 0 0 3px black; box-shadow: 0 0 3px black; } 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script> <div id="ticker"> <div id="rotator"> <span>8</span> <span>9</span> <span>0</span> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> </div> <div id="result"></div> </div> 

非常簡單，向上或向下動畫滾動位置，然后根據方向追加或預先添加第一個或最后一個數字。 可以在此處設置動畫的持續時間：

cog.animate({scrollTop: current}, 250, function() {

---

更新 - 在獲得一些新的見解后，例如touchend事件總是觸發原始元素，我已經徹底檢查了代碼。 除此之外，它現在有一個精靈背景，它將與數字本身的大小成比例。 還改進了整體邏輯並刪除了嵌套偵聽器故障。

這種編輯的另一個原因是插入一個允許有多個代碼（並預設數字）的演示。 由於我甚至已經超越了這一點（添加了直接響應功能），我認為最好還是留下最小的工作代碼：

 $(function() { var gate = $(window), orb = document, cog = $('.rotator'), field = $('#result'), slot = cog.height()/2, base = 1.5*slot, list = [], niche = [7,7,7], term = 250, // duration of animation mass, up = true, yaw = 'mousemove.ambit touchmove.ambit', hike = 'mouseup.turf touchend.turf', part = 'mouseleave.range'; tallyCells(); if (orb.readyState == 'complete') interAction(); else gate.one('load', interAction); gate.on('mouseleave touchcancel', function(e) { !(e.type == 'mouseleave' && e.relatedTarget) && lotRelease(); }); function interAction() { cog.scrollTop(base).each(function(unit) { var pinion = $(this), digit = pinion.find('.quota'), cipher = Number(niche[unit])%10 || 0; list[unit] = digit; niche[unit] = 0; field.append(0); for (var i = 0; i < cipher; i++) nextNumber(pinion, unit, true); pinion.mousewheel(function(turn, delta) { if (isBusy(pinion)) return false; up = delta > 0; nextNumber(pinion, unit); return false; }); digit.on('mousedown touchstart', function(e) { if (e.which && e.which != 1) return; var zest = this, ken = {}, item = $(this).index(); tagPoints(e, ken); digit.on(part, wipeSlate).on(hike, function(e) { wipeSlate(); var quit = e.originalEvent.changedTouches; if (quit) var jab = orb.elementFromPoint(quit[0].clientX, quit[0].clientY); if (item == 2 || quit && jab != zest || isBusy(pinion)) return; up = item == 1; nextNumber(pinion, unit); }); gate.on(yaw, function(e) { hubTrace(e, ken); }) .on(hike, function() { lotRelease(); if (!ken.hit || isBusy(pinion)) return; up = ken.way < 0; nextNumber(pinion, unit); }); return false; }); }).fadeTo(0,1); function tagPoints(act, bit) { var nod = act.originalEvent.touches; bit.mark = nod ? nod[0].pageY : act.pageY; bit.veer = false; } function hubTrace(task, gob) { var peg = task.originalEvent.touches, fly = peg ? peg[0].pageY : task.pageY; gob.way = fly-gob.mark; gob.hit = Math.abs(gob.way) > 30; if (!gob.veer && gob.hit) { gob.veer = true; wipeSlate(); } } function wipeSlate() { mass.off(part + ' ' + hike); } function isBusy(whirl) { return whirl.is(':animated'); } function nextNumber(aim, knob, quick) { var intent = base, hook = list[knob]; up ? intent += slot : intent -= slot; if (quick) { aim.scrollTop(intent); revolveTooth(); } else aim.animate({scrollTop: intent}, term, revolveTooth); function revolveTooth() { up ? hook.eq(0).appendTo(aim) : hook.eq(9).prependTo(aim); list[knob] = aim.find('.quota'); niche[knob] = Number(list[knob].eq(2).text()); aim.scrollTop(base); field.text(niche.join('')); } } } function lotRelease() { gate.off(yaw).add(mass).off(hike); mass.off(part); } function tallyCells() { cog.each(function() { for (var i = 0; i < 10; i++) { var n; !i ? n = 8 : (i == 1 ? n = 9 : n = i-2); $(this).append('<div></div>').find('div').eq(i).text(n).addClass('quota'); } }); mass = $('.quota'); } }); 

 body { text-align: center; background: grey; } #ticker, .rotator { display: inline-block; } .rotator { width: 100px; height: 140px; font-family: "Times New Roman"; font-size: 50px; line-height: 80px; background-image: url(http://ataredo.com/external/image/flip.png), url(http://ataredo.com/external/image/flip.png), url(http://ataredo.com/external/image/flip.png); background-position: 0 0, 50% 50%, 100% 150%; background-size: 300% 50%; background-repeat: no-repeat; margin: 0 0 10px; overflow: hidden; opacity: 0; } .quota { height: 50%; cursor: default; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; } #result { height: 35px; font-size: 20px; color: white; line-height: 35px; letter-spacing: 3px; -webkit-box-shadow: 0 0 3px black; box-shadow: 0 0 3px black; } 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script> <div id="ticker"> <div class="rotator"></div> <div class="rotator"></div> <div class="rotator"></div> <div id="result"></div> </div> 

它將自動填充數字，因此無需編寫標記。 響應鼠標拖動。

---

腳本的最新發展可以在這里找到：

codepen.io/Shikkediel/pen/avVJdG

---

最終更新 - 使用transition而不是jQuery .animate的3d版本。 輪子由圍繞x軸的單獨旋轉元件組成，創建一個基本無限的十邊形，無需預先添加或附加元素：

codepen.io/Shikkediel/pen/qpjGyq

齒輪是“可以輕彈的”，使它們以用戶給出的速度前進 - 然后在點擊時再次停止。 與原始演示相比，它們對鼠標滾輪事件的響應速度更快。 我遺漏點擊事件的兩個原因，而不是早期的腳本。 瀏覽器支持也有點受限但很好 - 我已經做了額外的努力使其與IE10 +兼容。