漂亮的鼠标跟踪样式

最新推荐文章于 2025-08-12 14:37:12 发布

玉凌风_BLOG

最新推荐文章于 2025-08-12 14:37:12 发布

阅读量719

点赞数

CC 4.0 BY-SA版权

分类专栏：网页效果文章标签： function javascript html div

本文链接：https://blog.csdn.net/Epll_apple/article/details/2515593

网页效果专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用HTML与JavaScript实现的动态鼠标效果案例。通过复杂的数学公式计算，此案例能够使网页背景中出现跟随鼠标移动的闪烁星星效果。适用于希望为网站增加互动性和美观性的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
     <TITLE>漂亮的鼠标样式</TITLE>
     <META http-equiv=Content-Type content="text/html; charset=gb2312">
     <META content="MSHTML 5.00.2920.0" name=GENERATOR>
</HEAD>

          if (document.all){
function MoveHandler(){
  Xpos = document.body.scrollLeft+event.x;
  Ypos = document.body.scrollTop+event.y;
}
document.onmousemove = MoveHandler;
          }

          else if (document.layers){
function xMoveHandler(evnt){
  Xpos = evnt.pageX;
  Ypos = evnt.pageY;
                  }
         window.onMouseMove = xMoveHandler;
          }

         function animateLogo() {
if (document.all){
  yBase = window.document.body.offsetHeight/4;
  xBase = window.document.body.offsetWidth/4;
}
else if (document.layers){
  yBase = window.innerHeight/4 ;
  xBase = window.innerWidth/4;
}

if (document.all){
  var totaldivs=document.all.starsDiv.all.length
  for ( i = 0 ; i < totaldivs ; i++ ){
   var tempdiv=document.all.starsDiv.all[i].style
   tempdiv.top = Ypos + Math.cos((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
   tempdiv.left = Xpos + Math.sin((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
  }
}

else if (document.layers){
  for ( j = 0 ; j < 47 ; j++ ) {
   var templayer="a"+j
   document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
   document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
  }
}
currStep += step;
setTimeout("animateLogo()", 15);
          }
         animateLogo();
// -->
</script>

</BODY>

</HTML>