JavaScript实现的鼠标跟随特效示例【2则实例】


Posted in Javascript onDecember 22, 2018

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

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

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

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

JavaScript实现的鼠标跟随特效示例【2则实例】

源代码:

<html>
<head>
 <title>
  Twinkle stars
 </title>
 <style>
  .iestars{
   position:absolute;
   top:00px; left:00px;
   height:50px;
   width:50px;
   padding-top:15px;
   text-align:center;
   display:none;
  }
 </style>
</head>
<body>
 <script language = "JavaScript">
  //数组保存星星的颜色,也可以设置为其它颜色,也可以增加或减少颜色数量
  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('<div class = "iestars" >...</div>');
  }
  //处理鼠标事件
  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);
  }
 </script>
</body>
</html>

2、水中鼠标特效

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

效果图:

JavaScript实现的鼠标跟随特效示例【2则实例】

源代码:

<html>
<head>
<meta charset="utf-8">
 <title>
  Water Bubbles
 </title>
 <style>
 .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);
   }
 </style>
</head>
<body>
<div id="low">
</div>
<div class="center">
eret
<a href="#" rel="external nofollow" >erte</a>
rt<p>rtdfffffffffff</p>
</div>
</body>
<script language="JavaScript">
  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+='<img class="si" src="' + bubble.imgsrc + '" >';
  }
  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();
 </script>
</html>

PS:感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun 测试上述代码,看看运行效果。

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

Javascript 相关文章推荐
jquery 简单导航实现代码
Sep 11 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 #Javascript
Element input树型下拉框的实现代码
Dec 21 #Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 #Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 #Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 #Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 #Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 #Javascript
You might like
php5 mysql分页实例代码
2008/04/10 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
layer更改皮肤的实现方法
2019/09/11 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
python复制与引用用法分析
2015/04/08 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
优秀护士演讲稿
2014/04/30 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
使用HttpSessionListener监听器实战
2022/03/17 Java/Android
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python
Java Redisson多策略注解限流
2022/09/23 Java/Android