Login
网站首页 > 文章中心 > Js

鼠标跟随文字的实现方法附送示例代码

作者:小编 更新时间:2024-01-18 11:17:39 浏览量:98人看过

要实现鼠标跟随文字效果,可以使用JavaScript和CSS来完成。下面是一个简单的示例:


HTML:


<div id="container">

  <span id="follow-text">跟随鼠标移动的文字</span>

</div>



CSS:


#container {

  position: relative;

  width: 400px;

  height: 300px;

}


#follow-text {

  position: absolute;

  top: 0;

  left: 0;

  color: blue;

  font-size: 16px;

}



JavaScript:


var container = document.getElementById('container');

var followText = document.getElementById('follow-text');


container.addEventListener('mousemove', function(event) {

  var x = event.clientX - container.offsetLeft;

  var y = event.clientY - container.offsetTop;


  followText.style.left = x + 'px';

  followText.style.top = y + 'px';

});


在上述示例中,我们首先创建一个`<div>`容器,并在其中放置一个`<span>`元素用于显示要跟随鼠标移动的文字。


在CSS中,我们设置了容器的宽度、高度以及文字的样式。


然后,在JavaScript中,我们通过使用`addEventListener`方法来监听容器的`mousemove`事件。在事件处理程序中,我们获取鼠标相对于容器的偏移量,并将文字元素的位置设置为这个偏移量,从而实现了鼠标跟随文字的效果。


当鼠标在容器内移动时,文字会跟随鼠标移动。你可以根据需要调整容器的大小、文字样式以及鼠标移动的效果。


版权声明:倡导尊重与保护知识产权,本站有部分资源、图片来源于网络,如有侵权,请联系我们修改或者删除处理。
转载请说明来源于"土嘎嘎" 本文地址:http://www.tugaga.com/jishu/js/1841.html
<<上一篇 2024-01-18
下一篇 >> 2024-01-18

编辑推荐

热门文章