时间戳

首页 > 解决方案 > 将动画笑脸添加到范围滑块旋钮

javascript - 将动画笑脸添加到范围滑块旋钮

问题描述

我正在尝试在范围滑块的旋钮上添加一个动画笑脸，但是我不确定是否有办法做到这一点。

这是我正在使用的内容：

var emojis = ['','','','',''];

$("input").mousemove(function(){
	var i = $(this).val();
	$(".emoji").html(emojis[i]);
});
.rate {
	text-align: center;
	width: 200px;
	height: 200px;
	ouline: thin solid lightgray;
}
.emoji {
	font-size: 120px;
	height: 170px;
	line-height: 170px;
}

input {
	cursor: ew-resize;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rate">
     <div class="emoji"></div>
     <input type="range" min="0" max="4" step="1">
 </div>

我想要实现的是在滑动时改变的旋钮上添加笑脸。

标签： javascriptjqueryhtmlcssslider

解决方案

嗯，答案是肯定的，你可以添加表情符号，但有很多东西需要注意。

  1. 您基本上是在删除所有range input系统样式并用您自己的自定义样式替换它。

  2. 在所有主要的浏览器渲染引擎（Webkit、Mozilla、MS）中，做这种样式的 CSS 都是不同的，所以需要做很多工作。

  3. 因为每个渲染引擎都是不同的，所以它很有可能在某些浏览器中无法正常工作（确保你对它如何失败感到满意）。

  4. 据我所知，您无法utf-8向滑块旋钮添加文本。因此，您需要每个表情符号的背景图像或可能的 SVG。

从 CSS 的角度来看，这是针对不同浏览器所需的一切示例：

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 7.8px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 11.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(48, 113, 169, 0.78);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
  border: 1.8px solid #00001e;
  height: 27px;
  width: 26px;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(54, 126, 189, 0.78);
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 11.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(48, 113, 169, 0.78);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
  border: 1.8px solid #00001e;
  height: 27px;
  width: 26px;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 11.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: rgba(42, 100, 149, 0.78);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: rgba(48, 113, 169, 0.78);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
  border: 1.8px solid #00001e;
  height: 27px;
  width: 26px;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  height: 11.4px;
}
input[type=range]:focus::-ms-fill-lower {
  background: rgba(48, 113, 169, 0.78);
}
input[type=range]:focus::-ms-fill-upper {
  background: rgba(54, 126, 189, 0.78);
}
<input type="range" />

当我有几分钟的时间时，我将用一些图像编辑这个例子。但基本上我建议background-image在-thumb伪元素中添加 a 。

归根结底，您最好构建一个完整的 javascript 解决方案并完全忘记 HTML5 范围输入

推荐阅读