JavaScript实现的鼠标跟随特效示例

本文实例讲述了Javascript实现的鼠标跟随特效。分享给大家供大家参考，具体如下：

鼠标是现在电脑的基本配置之一，也是最常用的输入命令的工具之一。本文将将一些与鼠标有关系的特效。

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

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

源代码：

 
 
  .iestars{
   position:absolute;
   top:00px; left:00px;
   height:50px;
   width:50px;
   padding-top:15px;
   text-align:center;
   display:none;
  }
 


 

2、水中鼠标特效

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

效果图：

源代码：

 
 
 .center{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid yellow;
    width: 220px;
    height: 42px;
    padding: 10px;
    z-index: 3;
   }
   img{
    position:absolute;
    top:0px;
    left:0px;
    filter:alpha(opacity=40);
   }
 





eret
erte
rt
rtdfffffffffff

PS：感兴趣的朋友还可以使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码，看看运行效果。

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

希望本文所述对大家Javascript程序设计有所帮助。