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

Question

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

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

我们的想法是获取一串文本并将每个字符包装在一个范围内，其中包含一个整体类“single-char”和一个唯一类。

原文字符串是这样的:

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

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

任何帮助将不胜感激!

Answer 1

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

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

  $(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>