刷新时更改渐变颜色但保持光标位置元素有效？

Question

我有光标位置和渐变工作但似乎无法弄清楚当光标位置元素仍在工作时如何使渐变颜色发生变化。

我尝试在每次刷新时尝试渐变颜色更改，从数组中进行选择。这就是现在的情况：

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

＆＃13;

＆＃13;

$(".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);
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

$(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);
  });
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;