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

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

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

源代码：

<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、水中鼠标特效

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

效果图：

源代码：

<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="#">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>

javascript实例——鼠标特效篇(包含2个实例)的更多相关文章

  1. javascript实例——文本特效篇(包含3个小例子)

    1.标题跑马灯 常常能够在一些新闻网站,或者其他地方,看到文字在一个特定的区域内,来回滚动.一旦超出边界就消失了,那么这些效果是如何做到的呢,今天我们就来讲讲. 图示效果: 源代码: <!doc ...

  2. javascript实例——时间日期篇(包含5个实例)

    本来想在网上找一些js实例来练练手,结果发现一本书<突破JavaScript编程实例五十讲>,看了下内容还不错,就下了下来: 后面又下了该书籍的源码,一看才发现这本书编的日期是2002年的 ...

  3. JavaScript 基础知识 - BOM篇

    前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...

  4. 深入理解javascript函数系列第二篇——函数参数

    × 目录 [1]arguments [2]内部属性 [3]函数重载[4]参数传递 前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传 ...

  5. javascript运动系列第一篇——匀速运动

    × 目录 [1]简单运动 [2]定时器管理 [3]分享到效果[4]移入移出[5]运动函数[6]透明度[7]多值[8]多物体[9]回调[10]函数完善[11]最终函数 前面的话 除了拖拽以外,运动也是j ...

  6. JavaScript 面向对象(三) —— 高级篇

    JavaScript 面向对象(一) —— 基础篇 JavaScript 面向对象(二) —— 案例篇 一.json方式的面向对象 首先要知道,js中出现的东西都能够放到json中.关于json数据格 ...

  7. JavaScript 面向对象(二) —— 案例篇

    看案例前可以先看看基础篇:JavaScript 面向对象(一) —— 基础篇 案例——面向对象的选项卡:把面向过程的程序一步步改成面向对象的形式,使其能够更加的通用(但是通用的东西,一般会比较臃肿). ...

  8. JavaScript 面向对象(一) —— 基础篇

    学好JS的面向对象,能很大程度上提高代码的重用率,像jQuery,easyui等,这篇博客主要从细节上一步步讲JS中如何有效地创建对象,也可以看到常见的创建对象的方式,最后也会附上一些JS面向对象的案 ...

  9. 深入理解javascript函数系列第一篇——函数概述

    × 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...

随机推荐

  1. 解决vs2015引用时没有Report Viewer的问题

    1.选择“工具”>“Nuget包管理器”>“程序包管理器控制台” 执行命令:Install-Package Microsoft.ReportingServices.ReportViewer ...

  2. Enum 绑定到 CheckBox

    第一种方法: 后台: internal static class EnumCache<T> where T : struct, IConvertible { private static ...

  3. 在微信开发中如果WeixinJSBridge.call('closeWindow');关闭窗口无效！

    原因是,成功后页面跳转到普通页面.必须在前面加上 parent.WeixinJSBridge.call('closeWindow'); 这样才行.如果是使用了iframe页面,这样也可以关闭网页,回到 ...

  4. Flask基础-配置，路由

    一,配置文件 flask中的配置文件是一个flask.config.Config对象(继承字典),默认配置为: { 'DEBUG': get_debug_flag(default=False), 是否 ...

  5. Cordova - 实现热更新 !

    Cordova版本:8.0.0 更新APP平台:Android 操作系统:Windows Cordova的热更新,作用是把www内的变动部分更新到APP中,实现主程序不动,完成更新!!这个热更新功能, ...

  6. JavaScript基础函数和词法分析以及常用的内置对象和使用方法（4）

    day52 参考:https://www.cnblogs.com/liwenzhou/p/8004649.html 函数 函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式 ...

  7. 一个Unix内核级别漏洞（一）

    翻译原创稿件,prison整理翻译,首发ichunqiu,原地址:http://lsd-pl.net/kernelvuln.pdf 这是一篇关于Unix内核级别漏洞的paper,由某团队发布在一次黑客 ...

  8. Linux 操作日志

    这里: /var/log/messages

  9. ifconfig-dropped

    drop的包是因为网卡的buffer满了 查看当前网卡的buffer size情况 ethtool -g eth0 Ring parameters for eth0: Pre-set maximums ...

  10. 非对齐访问（unaligned accesses)

    从CPU角度看内存访问对齐 结构体成员非对齐访问所带来的思考 ARM体系中存储系统非对齐的存储访问操作 什么是cache line? cache line就是处理器从RAM load/store数据到 ...