根据鼠标位置为 HTML 字符串中的单个字符设置样式

Question

我正在尝试能够根据与鼠标位置的接近程度来更改文本字符串中单个字符的 css 属性。

代码笔：https://codepen.io/NewbCake/pen/qYXvoo

我们的想法是获取一串文本并将每个字符包装在一个整体 class 为“单字符”和唯一 class.

的范围内

原文串是这样的：

<p class='sample-text hover-letter'>This sample text turns red, character by character, when you hover over it with your mouse.</p>

然后拆分成这样的单字：

<span class=“single-char char-0”> T</span>
<span class=“single-char char-1”> h</span>
<span class=“single-char char-2”> i</span>
<span class=“single-char char-3”> s</span>

JS

function arrayMe(string) {

  // For all matching elements
  $(string).each(function() {

    // Get contents of string
    var myStr = $(this).html();

    // Split myStr into an array of characters
    myStr = myStr.split("");

    // Build an html string of characters wrapped in  tags with classes
    var myContents = "";
    for (var i = 0, len = myStr.length; i < len; i++) {
        myContents += '<span class="single-char char-' + i + '">' + myStr[i] + '</span>';
    }

    // Replace original string with constructed html string
    $(this).html(myContents);
console.log(i)
});
(function() {

  var mX, mY, distance,
    $distanceSpan_red = $('#distance_blue span'),
    $distanceSpan_blue = $('#distance_red span'),
    $element0 = $('.char-0'),
    $element1 = $('.char-1');
    $element2 = $('.char-2');
    $element3 = $('.char-3');
    $element4 = $('.char-4');

function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left + (elem.width() / 2)), 2) + Math.pow(mouseY - (elem.offset().top + (elem.height() / 2)), 2)));
}

$(document).mousemove(function(e) {
  mX = e.pageX;
  mY = e.pageY;

  distance0 = calculateDistance($element0, mX, mY);
  distance1 = calculateDistance($element1, mX, mY);
  distance2 = calculateDistance($element2, mX, mY);
  distance3 = calculateDistance($element3, mX, mY);
  distance4 = calculateDistance($element4, mX, mY);


  $element0.css({'font-size': distance0 + 'px'});
  $element1.css({'font-size': distance1 + 'px'});
  $element2.css({'font-size': distance2 + 'px'});
  $element3.css({'font-size': distance3 + 'px'});
  $element4.css({'font-size': distance4 + 'px'});
});
})();
}
// Calling arrayMe on page load, on class "sample-text"
$('document').ready(function() {
  var myStringType = $('.sample-text');
  arrayMe(myStringType);
});

我苦恼的是如何使代码灵活并动态地工作。无论文本数量如何，它都应该能够测量从鼠标位置到每个字母的唯一 class 的距离，然后将其存储为距离值，然后将该距离值映射到 css 属性值。

任何帮助将不胜感激！

Answer 1

我重组了您的代码以制作一个工作示例。您需要根据 class single-char 创建一个数组，这样您就可以循环它并不要对字符数量进行硬编码。

我评论你 calculateDistance() return 因为数学有点古怪。但是通过这个例子你可以看到所有的角色是如何受到影响的

  $(document).mousemove(function(e) {
    var mX = e.pageX;
    var mY = e.pageY;
    $('.single-char').each(function(){
      $(this).css({'font-size': calculateDistance(this, mX, mY) + 'px'});
    });                    
  });

您可以使用 $('common-class') 定位所有字符，然后使用 .each() 循环它们。

希望这对您有所帮助:)

function arrayMe(string){
 $(string).each(function() {
  var myStr = $(this).html();
  myStr = myStr.split("");
  var myContents = "";
  for (var i = 0, len = myStr.length; i < len; i++) {
   myContents += '<span class="single-char char-' + i + '">' + myStr[i] + '</span>';
  }
  $(this).html(myContents);
    console.log(i);
 });
}



 function calculateDistance(elem, mouseX, mouseY) {
    // return Math.floor(Math.sqrt(Math.pow(mouseX - ($(elem).offset().left + ($(elem).width() / 2)), 2) + Math.pow(mouseY - ($(elem).offset().top + ($(elem).height() / 2)), 2)));
   return mouseX;
  }


  $(document).mousemove(function(e) {
    var mX = e.pageX;
    var mY = e.pageY;
    $('.single-char').each(function(){
      $(this).css({'font-size': calculateDistance(this, mX, mY) + 'px'});
    });                    
  });


$('document').ready(function() {
 var myStringType = $('.sample-text');
 arrayMe(myStringType);
});

.single-char:hover {
 color:red;
 cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='sample-text hover-letter'>This sample text turns red, character by character, when you hover over it with your mouse.</p>

添加此代码是为了在跟进评论后帮助 OP。

function arrayMe(string){
 $(string).each(function() {
  var myStr = $(this).html();
  myStr = myStr.split("");
  var myContents = "";
  for (var i = 0, len = myStr.length; i < len; i++) {
   myContents += '<span class="single-char char-' + i + '">' + myStr[i] + '</span>';
  }
  $(this).html(myContents);
    console.log(i);
 });
}



 function calculateDistance(elem, mouseX, mouseY) {
    // return Math.floor(Math.sqrt(Math.pow(mouseX - ($(elem).offset().left + ($(elem).width() / 2)), 2) + Math.pow(mouseY - ($(elem).offset().top + ($(elem).height() / 2)), 2)));
   return mouseX;
  }




$('document').ready(function() {
 var myStringType = $('.sample-text');
 arrayMe(myStringType);
  
    $('.single-char').hover(function(e) {
      var charNumber = $(this).attr('class').split('-')[2];
      $('.single-char').each(function(){
       $(this).css({'font-size': 12 + 'px'});
      }); 
    $(this).css({'font-size': 36 + 'px'});           
  });
});

.single-char:hover {
 color:red;
 cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='sample-text hover-letter'>This sample text turns red, character by character, when you hover over it with your mouse.</p>

这是第二个跟进片段，用于演示数学的趣味性。

function arrayMe(string){
 $(string).each(function() {
  var myStr = $(this).html();
  myStr = myStr.split("");
  var myContents = "";
  for (var i = 0, len = myStr.length; i < len; i++) {
   myContents += '<span class="single-char char-' + i + '">' + myStr[i] + '</span>';
  }
  $(this).html(myContents);
    console.log(i);
 });
}



 function calculateDistance(elem, mouseX, mouseY) {
    return Math.floor(Math.sqrt(Math.pow(mouseX - ($(elem).offset().left + ($(elem).width() / 2)), 2) + Math.pow(mouseY - ($(elem).offset().top + ($(elem).height() / 2)), 2)));
  }




$('document').ready(function() {
 var myStringType = $('.sample-text');
 arrayMe(myStringType);
  
    $('.single-char').hover(function(e) {
      var mX = e.pageX;
      var mY = e.pageY;
      var charNumber = $(this).attr('class').split('-')[2];
      $('.single-char').each(function(){
       $(this).css({'font-size': calculateDistance($(this), mX, mY) + 'px'});
      });      
  });
});

.single-char:hover {
 color:red;
 cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='sample-text hover-letter'>This sample text turns red, character by character, when you hover over it with your mouse.</p>

根据鼠标位置为 HTML 字符串中的单个字符设置样式

Styling individual characters in HTML strings based on mouse position

jquery

html

css

split

mouse-position