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

标签 jquery html css split mouse-position

我试图能够根据与鼠标位置的接近程度来更改文本字符串中各个字符的 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 属性值。

任何帮助将不胜感激!

最佳答案

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

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

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

关于jquery - 根据鼠标位置设置 HTML 字符串中各个字符的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50183995/

相关文章:

javascript - 如何将语音捕获的文本放入文本字​​段

javascript - 将鼠标悬停在某个区域上时使用 jQuery 在文本框中滑动

javascript - 视频背景不起作用(html、css、js)

javascript - jQuery 实时过滤,匹配时如何返回整行?

html - 在导航栏标题中扩展搜索输入

php - innerHTML PHP 内联 css 给出解析错误

php - Ajax : echo an array & fill textboxes

html - 我建立的网站上的 iPhone 上没有显示高分辨率图像,而且 3 张图像的宽度不合适

css display : what? - 一个接一个地排列盒子

css - 光滑箭头中的背景图像不会出现