时间戳

首页 > 解决方案 > jQuery：基于光标位置的字体变化设置

javascript - jQuery：基于光标位置的字体变化设置

问题描述

我想根据光标的位置转换可变字体。如果光标的x位置为0px，wght则应为200，如果光标位置在页面的右边框，wght则应为800。过渡必须是流畅的。

这是我的开始：

$(document).on("mouseover", function(e){
if(e.pageX <= 100)
{
$("div").css( "font-variation-settings", "'wght' 200" )
}
if(e.pageX >= 100)
{
$("div").css( "font-variation-settings", "'wght' 800" )
}
});
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Muli', sans-serif;
font-size: 5vw;
font-variation-settings: 'wght' 400;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/css2?family=Muli:wght@200..900&display=swap" rel="stylesheet">

<div>Weight based on cursor position</div>

谁能帮我？将非常感谢。:)

标签： javascriptjquery

解决方案

尽可能流畅：P

$(document).on("mousemove", function(e) {
  let factor = e.pageX / $(document).width();
  let wght = 200 + 600 * factor;
  
  $("div").css("font-variation-settings", "'wght' " + wght)
});
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Muli', sans-serif;
  font-size: 5vw;
  font-variation-settings: 'wght' 400;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/css2?family=Muli:wght@200..900&display=swap" rel="stylesheet">

<div>Weight based on cursor position</div>

更新：添加了一个延迟来优化它。

let enableHandler = true;

timer = window.setInterval(function() {
  enableHandler = true;
}, 50);

$(document).on("mousemove", function(e) {
  if (enableHandler) {
    let factor = e.pageX / $(document).width();
    let wght = 200 + 600 * factor;

    $("div").css("font-variation-settings", "'wght' " + wght)
    enableHandler = false;
  }
});
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Muli', sans-serif;
  font-size: 5vw;
  font-variation-settings: 'wght' 400;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/css2?family=Muli:wght@200..900&display=swap" rel="stylesheet">

<div>Weight based on cursor position</div>

推荐阅读