使用JavaScript怎么实现一个鼠标跟随特效-创新互联

这期内容当中小编将会给大家带来有关使用JavaScript怎么实现一个鼠标跟随特效，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

创新互联建站为客户提供专业的成都网站设计、网站制作、程序、域名、空间一条龙服务，提供基于WEB的系统开发. 服务项目涵盖了网页设计、网站程序开发、WEB系统开发、微信二次开发、成都做手机网站等网站方面业务。

1、跟随鼠标移动的彩色星星

如题，会根据鼠标的移动而移动，并在鼠标周围随机来回移动，让人感觉在放大缩小。根据书上的代码做了一些修改。比如，如果用户不移动鼠标，是不会显示星星效果的：其次就是将源代码中的亮度调节等去掉了，因为效果并不是很明显。截了三幅图，黑点近似代表鼠标的位置。效果图如下：

使用JavaScript怎么实现一个鼠标跟随特效

源代码：



 
  Twinkle stars
 
 


 
  //数组保存星星的颜色，也可以设置为其它颜色，也可以增加或减少颜色数量
  var colours=new Array('ff0000','00ff00','0000ff','ff00ff','00ffff','ffff00');
  var amount=colours.length;
  //初始化参数
  var Ydelay=0,Xdelay=0;  //圆环中心的位置
  var step=0.2;
  var currStep=0;
  var my=0,mx=0;  //记录鼠标当前位置
  var flag=0;
  //在容器中写入"."字符，闪烁的星星即是从"."变化而来的
  for (i=0; i < amount; i++){
   document.write('...

'); } //处理鼠标事件 function iMouse(){ my = event.y; mx = event.x; //第一次初始化，只运行一次 if (flag==0){ delay(); flag=1; } } document.onmousemove = iMouse; var iestars=document.getElementsByClassName("iestars"); function stars(){ for(i = 0;i < amount;i++){ var style = iestars[i].style; //访问每个容器的style属性 style.color=colours[i]; style.display="block"; style.top = Ydelay+80*Math.sin(currStep/2+i*3.1416/3)*Math.sin((currStep)/10); //竖直位置 style.left = Xdelay+80*Math.cos(currStep/2+i*3.1416/3)*Math.sin((currStep)/10); //水平位置 } currStep += step; } //计算圆环中心的位置，为当前圆环中心位置和鼠标位置的加权平均 function delay(){ Ydelay += (my-Ydelay)*1/20; Xdelay += (mx-Xdelay)*1/20; stars(); setTimeout('delay()',10); }

2、水中鼠标特效

鼠标上方不断地冒出气泡，这些气泡在上升中不断摇晃，慢慢的变大，直到消失在窗口。

效果图：

使用JavaScript怎么实现一个鼠标跟随特效

源代码：




 
  Water Bubbles

eret erte rt

rtdfffffffffff

重庆分公司，新征程启航

使用JavaScript怎么实现一个鼠标跟随特效-创新互联

其他资讯