javascript - 在刷新时更改渐变颜色但保持光标位置元素处于事件状态？

Question

我的光标位置和渐变工作正常，但似乎无法弄清楚如何在光标位置元素仍在工作时改变渐变颜色。

我试图在每次刷新时改变渐变颜色，从数组中进行选择。现在是这样:

http://jsfiddle.net/trktqqh6/3/

$(".gradient").mousemove(function( event ) {
  var w = $(this).width(),
      pct = 360*(+event.pageX)/w,
      bg = "linear-gradient(" + pct + "deg,#4ac1ff,#795bb0)";
      $(".gradient").css("background-image", bg);
});

html {
  height: 100%;
}
body {
  background-color: #292c2f;
  font-family: monospace;
  overflow: hidden;
}
.gradient {
  height: calc(100% - 70px);
  background-image: -webkit-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: -moz-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: -o-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: -ms-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: linear-gradient(180deg, #4ac1ff, #795bb0);
  position: absolute;
  width: 100%;
}
header {
  background: #252525;
  height: 70px;
  line-height: 70px;
}
#currentVal {
  color: #424242;
  font-size: 14px;
  font-weight: 800;
  padding-left: 240px;
}
#currentVal span {
  color: #ccc;
}
#range {
  width: 180px;
  border: 0;
  height: 4px;
  background: #424242;
  outline: none;
  position: absolute;
  left: 30px;
  top: 32px;
}
#range .ui-slider-handle {
  position: absolute;
  margin: 0px 0 0 -7px;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background: #fff;
  border: 0;
  height: 14px;
  width: 14px;
  outline: none;
  cursor: pointer;
}
#range .ui-slider-handle:hover,
#range .ui-slider-handle:focus {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
#range .ui-slider-range {
  background: #4ac1ff;
}

<div class="gradient"></div>

Answer 1

这创建起来相当简单。只要有一个颜色数组，使用随机数生成方法，从数组中选取与随机数对应的颜色，将其设置为渐变并将其分配给元素即可。

$(document).ready(function() {
  var colors = [
    ["red", "yellow"],
    ["blue", "aqua"],
    ["chocolate", "brown"],
    ["steelblue", "lavender"]
  ];
  var num = Math.round(Math.random() * 3);
  bg = "linear-gradient(180deg," + colors[num][0] + "," + colors[num][1] + ")";
  $(".gradient").css("background-image", bg);

  $(".gradient").mousemove(function(event) {
    var w = $(this).width(),
      pct = 360 * (+event.pageX) / w,
      bg = "linear-gradient(" + pct + "deg," + colors[num][0] + "," + colors[num][1] + ")";
    $(".gradient").css("background-image", bg);
  });
});

html {
  height: 100%;
}
body {
  background-color: #292c2f;
  font-family: monospace;
  overflow: hidden;
}
.gradient {
  height: calc(100% - 70px);
  background-image: -webkit-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: -moz-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: -o-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: -ms-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: linear-gradient(180deg, #4ac1ff, #795bb0);
  position: absolute;
  width: 100%;
}
header {
  background: #252525;
  height: 70px;
  line-height: 70px;
}
#currentVal {
  color: #424242;
  font-size: 14px;
  font-weight: 800;
  padding-left: 240px;
}
#currentVal span {
  color: #ccc;
}
#range {
  width: 180px;
  border: 0;
  height: 4px;
  background: #424242;
  outline: none;
  position: absolute;
  left: 30px;
  top: 32px;
}
#range .ui-slider-handle {
  position: absolute;
  margin: 0px 0 0 -7px;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background: #fff;
  border: 0;
  height: 14px;
  width: 14px;
  outline: none;
  cursor: pointer;
}
#range .ui-slider-handle:hover,
#range .ui-slider-handle:focus {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
#range .ui-slider-range {
  background: #4ac1ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gradient"></div>