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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
iis6+javascript Add an Extension File
Jun 13 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
js使用ajax读博客rss示例
May 06 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
js简单实现自动生成表格功能示例
Jun 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
深入解析php模板技术原理【一】
2008/01/10 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
Js动态创建div
2008/09/25 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
centos下更新Python版本的步骤
2013/02/12 Python
Python greenlet实现原理和使用示例
2014/09/24 Python
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
社团文化节邀请函
2014/01/10 职场文书
企业宣传方案
2014/03/04 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
投标诚信承诺书
2014/05/26 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
质量保证书格式
2015/02/27 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis