如何更改鼠标移动时的渐变程度

How to change degree of gradient on mouse movement?

本文关键字：渐变 程度 移动 何更改 鼠标      更新时间：2023-09-26

我的灵感来自这个代码 sinppet 来自 http://codepen.io/andreasstorm/pen/syvoL

.HTML-

<header>
    <div id="range"></div>
      <div id="currentVal">background-image: linear-gradient( <span id="spanVal">180</span>deg , <span style="color:#4ac1ff">#4ac1ff</span>, <span style="color:#795bb0">#795bb0</span> )</div>
</header>
<div class="gradient"></div>

CSS （触笔） -

 html
  height 100%
 body
  background-color #292c2f
  font-family monospace
  overflow hidden
 .gradient
  height calc(100% - 70px)
  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
  span
    color #ccc
 #range
  width 180px
  border 0
  height 4px
  background #424242
  outline none
  position absolute
  left 30px
  top 32px
  .ui-slider-handle
    position absolute
    margin 0px 0 0 -7px
    border-radius 100%
    background white
    border 0
    height 14px
    width 14px
    outline none
    cursor pointer
    &:hover
    &:focus
      transform scale(1.1)
  .ui-slider-range
    background #4ac1ff

JavaScript （coffeeScript） -

$("#range").slider
  range: "min"
  max: 360
  value: 180
  slide: (e, ui) ->
    $("#spanVal").html ui.value
    bg = "linear-gradient(" + ui.value + "deg,#4ac1ff,#795bb0)"
    $(".gradient").css "background-image", bg

以同样的方式，我试图在网页的背景上实现它，尽管我不太精通JavaScript。无论如何，我们可以对鼠标移动实现相同的效果吗？我的意思是更改渐变的程度以及光标在屏幕上的位置。

任何帮助将不胜感激！

这个呢？是你要找的吗？

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

我只使用 x 运动。您可以使用您喜欢的内容。用户使用类 .gradient 在div 周围移动鼠标。我只是使用div宽度将值调整为百分比并更改背景。

添加 x+y 并给出随机度

var originalBG = $(".gradient").css("background");
$('.gradient')
  .mousemove(function(e) {
    x = e.pageX - this.offsetLeft;
    y = e.pageY - this.offsetTop;
    xy = x + y;
    bgWebKit = "linear-gradient(" + xy + "deg, #4ac1ff, #795bb0)";
    $(this).css({
      'background': bgWebKit
    })
  }).mouseleave(function() {
    $(this).css({
      background: originalBG
    });
  });
* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  background-color: #292c2f;
  font-family: monospace;
  overflow: hidden;
}
.gradient {
  height: calc(100%);
  background: -webkit-linear-gradient(270deg, #4ac1ff, #795bb0);
  background: -moz-linear-gradient(270deg, #4ac1ff, #795bb0);
  background: -o-linear-gradient(270deg, #4ac1ff, #795bb0);
  background: -ms-linear-gradient(270deg, #4ac1ff, #795bb0);
  background: linear-gradient(180deg, #4ac1ff, #795bb0);
  position: absolute;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gradient"></div>

相关文章：