用JavaScript实现鼠标跟随特效的例子[2个例子]

本文描述了用JavaScript实现的鼠标跟随效果。分享给大家参考，如下：

鼠标是计算机的基本配置之一，也是最常用的输入命令的工具之一。本文将介绍一些与鼠标相关的特效。

1.随着鼠标移动的彩色星星

如果问问题，它会根据鼠标的移动而移动，并在鼠标周围随机来回移动，让人感觉它在放大缩小。根据书中的代码做了一些修改。例如，如果用户不移动鼠标，则不会显示星形效果。其次，源代码中的亮度级别会因为效果不明显而被去掉。三张图片被切掉，黑点近似代表鼠标的位置。效果图如下：

源代码：

htmlhead标题闪烁星星/标题样式。iestars { position:absolutetop:00pxleft:00px高度：50 px；宽度：50 px；填充-top :15 px；文本对齐：居中；display:none}/style/headbody脚本语言=' JavaScript '/array保存星星的颜色，也可以设置为其他颜色，或者增加或减少颜色数量var colors=new array ('ff0000 '，' 00ff00 '，' 000ff '，' ff00ff '，' 00ff 00 '，' ffff 00 ')var amount=colors . length；//初始化参数var Ydelay=0，Xdelay=0；//环中心的位置var step=0.2var curr step=0；var my=0，MX=0；//记录鼠标当前位置：var标志=0；//写出字符’。在容器中，闪烁的星代表(i=0 ),它是从'开始变化的。一、金额；I){ document . write(' div class=' iestar ')./div ')；}//处理鼠标事件函数iMouse(){ my=event . y；mx=event.x//第一次初始化，只在(flag==0){ delay()；标志=1；} } document.onmousemove=iMousevar iestar=document . getelementsbyclassname(' iestar ')；函数star(){ for(I=0；一、金额；I){ var style=iestar[I]。风格；//访问style属性style。颜色=每个容器的颜色[I]；style.display=' blockstyle . top=Ydelay 80 * math . sin(curr step/2 I * 3.1416/3)* math . sin((curr step)/10)；//垂直位置样式。left=xd lay 80 * math . cos(curr step/2i * 3.1416/3)* math . sin((curr step)/10)；//水平位置} currStep=step}//计算圆环中心的位置，即加权平均函数delay () {y delay=(my-y delay) *当前圆环中心与鼠标位置的1/20；Xdelay=(MX-Xdelay)* 1/20；stars()；setTimeout('delay()'，10)；}/脚本/正文/html2，水下鼠标特效

气泡从鼠标顶部冒出来，这些气泡在上升过程中晃动，慢慢变大，直到消失在窗口。

渲染：

源代码：

htmlhearteta charset=' utf-8 '标题水泡泡/标题样式.中心{位置：绝对值；前：50%；左侧： 50%;transform: translate(-50%，-50%)；border: 2px固体黄色；宽度： 220 pxheight : 42 xpadding : 10p xz-index : 3；} img { position : absolutetop :0 pxleft :0 pxfilter : alpha(不透明度=40);}/style/head dydiv id=' low '/div class=' center ' ereta href=' # ' rel=' external no follow ' erte/artprtdfffffffff/p/div/body script language=' JavaScript ' var bubble={ img src : ' img/1。gif '，金额： 15，我的： 10，//初始位置mx : 10，//初始位置Ypos : []，//y数组，记录图片的位置Xpos : []，//x数组速度：[],//上升速度size : []，//范围sizegrow :[]，//增长速度角度：[],//余弦曲线的角度anglegrow :[]，//每次余弦曲线角度变化img: ' '，} //鼠标事件文件。onmousemove=Mousemove函数MouseMoVE(){ bubble。my=事件。y-20；泡泡。MX=事件。x；} //初始化数据for(I=0；我冒泡了。金额；I){ 0泡泡ypos[I]=泡泡。我的-20；泡泡Xpos[i]=泡泡。MX；泡泡。速度[我]=数学。random()* 1 3；//速度在[1,4]气泡。角度[I]=0；泡泡。角度增长[我]=数学。random()* 0.5 0.1；//角度变换[0.2,0.6]气泡。大小[I]=8；泡泡。sizegrow[I]=数学。random()* 1 2；//尺寸变换[0.5，0.6)}为(I=0；我冒泡了。金额；I){泡泡。img=' img class=' si ' src=' http : '气泡。img src“”；} var low=文档。getelementbyid(' low ')；低。innerhtml=bubble。imgvar si=文档。getelementsbytagname(' img ')；//创建冒泡程序函数mouse bubbles(){ for(var I=0；我冒泡了。金额；I){ 0泡泡Ypos[i]=泡泡。速度[i] * (-1)气泡Xpos[i]=泡泡。速度[i] *数学。cos(气泡。角度[I])；如果（泡沫Ypos[i]-25){//当到达最上方后，重新初始化泡泡Ypos[i]=泡泡。我的；泡泡Xpos[i]=泡泡。MX；泡泡。速度[我]=数学。random()* 4 1；泡泡大小[I]=8；//初始尺寸，上限25 }控制台。日志(si[I]' ' I)；si[i].style.left=bubble .xpos[I]；//左右变化si[i].style.top=bubble .ypos[I]；si[I]。风格。宽度=气泡。大小[I]；//改变尺寸si[I]。风格。高度=气泡。大小[I]；console.log(气泡ypos[I])；//组四行放怀泡泡。大小[I]=气泡。尺寸变大[我]；泡泡。角度[I]=气泡。角长[我]；如果(泡沫。大小[I]24)气泡。尺寸[I]=25；} setTimeout('MouseBubbles()'，15)；} MouseBubbles()；/script/htmlPS:感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码，看看运行效果。

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript运动效果与技巧汇总》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。