我的问题是关于用户 ByteHamster 在这里给出的答案:How to create JavaScript/HTML5 Spinner List with images?在答案中，他/她举例说明了如何使用 html、css 和 Javascript 创建滚动动画。动画允许用户通过单击屏幕上所选数字的上方或下方来滚动数字，所选数字显示在动画下方的 div 中。
我想知道是否可以做类似的事情，但不是让图像上下移动，而是可以将其变成数字轮吗？我的意思是，在上面的例子中，一旦数字达到 0，滚动就停止在一个方向上，我想知道是否有可能创建一个轮子，用户可以不断地从上到下或从下到上旋转它如果他们愿意的话。这需要使用 3d 交互式动画软件吗？
我看过这个问题:HTML5/CSS3 - how to make "endless" rotating background - 360 degrees panorama但我不确定答案是否适用于我的元素，因为它们似乎没有交互性。
由于用户ByteHamster的回答已经3年多了，我想知道是否有更好的方法用html5动画来实现这种效果？我是否认为示例中的 Javascript 会使其无法在某些未启用 Javascript 的设备/浏览器上运行？ html5 方法是否是确保效果适用于大多数设备/浏览器的最佳方式？
最佳答案
以下是我根据提供的信息汇总的内容...使用鼠标滚轮，滑动并单击顶部和底部的数字。当然是无限的。没有特殊的透视风格(还)，但我认为它看起来相当不错。仍然可以自然地成为一种选择。没有使用我在评论或 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 事件总是在原始元素上触发，我对代码进行了大修。除此之外，它现在有一个 Sprite 背景，将与数字本身的大小保持比例。还改进了整体逻辑并删除了嵌套的监听器故障。
此编辑的另一个原因是插入一个允许有多个代码(并预设数字)的演示。因为我什至已经超越了它(添加直接响应功能)，我认为在这里也留下最小的工作代码是个好主意:
$(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+ 兼容。
关于javascript - 如何制作 HTML5 旋转列表/旋转轮选择器/选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33157307/