资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

使用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

  var bubble={     imgsrc : "img/1.gif",     Amount : 15,     my : 10,   //初始位置     mx : 10,   //初始位置     Ypos : [], //y数组,记录图片的位置     Xpos : [], //x数组     Speed :[], //上升速度     size : [], //范围     sizegrow :[],  //增长速度     angle :[], //余弦曲线的角度     anglegrow :[], //每次余弦曲线角度变化     img:"",   }   //鼠标事件   document.onmousemove=MouseMove;   function MouseMove(){    bubble.my = event.y-20;    bubble.mx = event.x;   }   //初始化数据   for (i = 0; i < bubble.Amount; i++){    bubble.Ypos[i] = bubble.my-20;    bubble.Xpos[i] = bubble.mx;    bubble.Speed[i] = Math.random()*1+3;  //速度在[1,4)    bubble.angle[i] = 0;    bubble.anglegrow[i] = Math.random()*0.5+0.1;  //角度变换[0.2,0.6)    bubble.size[i] = 8;    bubble.sizegrow[i] = Math.random()*1+2;  //尺寸变换[0.5,0.6)   }   for (i = 0; i < bubble.Amount; i++){    bubble.img+='';   }   var low=document.getElementById("low");   low.innerHTML=bubble.img;   var si=document.getElementsByTagName("img");   //创建冒泡程序   function MouseBubbles(){      for (var i = 0; i < bubble.Amount; i++){       bubble.Ypos[i] += bubble.Speed[i] * (-1)       bubble.Xpos[i] += bubble.Speed[i] * Math.cos(bubble.angle[i]); ;        if(bubble.Ypos[i]<-25){//当到达最上方后,重新初始化         bubble.Ypos[i] = bubble.my;         bubble.Xpos[i] = bubble.mx;         bubble.Speed[i] = Math.random() * 4 + 1;         bubble.size[i] = 8;  //初始尺寸,上限25        }     console.log(si[i]+" "+i);       si[i].style.left = bubble.Xpos[i];  //左右变化       si[i].style.top = bubble.Ypos[i] ;       si[i].style.width = bubble.size[i];  //改变尺寸       si[i].style.height = bubble.size[i];       console.log(bubble.Ypos[i]);//组四行放怀       bubble.size[i] += bubble.sizegrow[i];       bubble.angle[i] += bubble.anglegrow[i];       if (bubble.size[i] > 24) bubble.size[i] = 25;      }       setTimeout('MouseBubbles()', 15);  }  MouseBubbles();  

上述就是小编为大家分享的使用JavaScript怎么实现一个鼠标跟随特效了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


新闻名称:使用JavaScript怎么实现一个鼠标跟随特效-创新互联
当前网址:http://cdkjz.cn/article/djjghh.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220