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

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. Linux Mint 楷体问题

    很多人都遇见过刚装完的 Linux Mint 界面字体是黑体,然后莫名其妙就变成楷体的问题. 先不说技术层面的原因,只说怎么解决. 造成这种情况,多数是安装输入法或其他某种软件的时候,同时安装了 AR ...

  2. C#数组的定义，不定长的数组？

    首先,在这里我要说明的是,C#中,定义了数组,那么就必须为其指定长度,且他的长度确定,不能够更改.一旦定义一个数组,那么操作系统就在内存中给这个数组指定了一块内存,他是不支持动态分配存储空间的.能够动 ...

  3. Linq to sql中使用DateDiff()

    Linq to sql中使用DateDiff() 计算时间差的方法 第一种办法: from p in PurchaseLists where EntityFunctions.DiffDays(p.Cr ...

  4. From Alpha to Gamma (II)

    这篇文章被拖延得这么久是因为我没有找到合适的引言 -- XXX 这一篇接着讲Gamma.近几年基于物理的渲染(Physically Based Shading, 后文简称PBS)开始在游戏业界受到关注 ...

  5. Topological Sor-207. Course Schedule

    There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have prer ...

  6. 合服导致 globalserver 起不来的问题

    globalserver 报错 RMIInitArmyBackObject InitError 根据报错信息一路追查下来,发现某个帮派的数据解析 json 的时候报错.监视变量,找出这段字符串,大致结 ...

  7. Python小白学习之路（十五）—【map()函数】【filter()函数】【reduce()函数】

    一.map()函数 map()是 Python 内置的高阶函数 有两个参数,第一个是接收一个函数 f(匿名函数或者自定义函数都OK啦):第二个参数是一个 可迭代对象 功能是通过把函数 f 依次作用在 ...

  8. Pycharm使用Git

    Pycharm使用Git 1.设置git程序路径 2.设置github连接 3.创建git respository 4.提交文件 5.共享给GitHub 6.修改文件push到版本库 7.从版本库ch ...

  9. 漫谈NIO(2)之Java的NIO

    1.前言 上章提到过Java的NIO采取的是多路IO复用模式,其衍生出来的模型就是Reactor模型.多路IO复用有两种方式,一种是select/poll,另一种是epoll.在windows系统上使 ...

  10. Spring Security构建Rest服务-1401-权限表达式

    Spring Security 的权限表达式 用法,在自定义的BrowserSecurityConfig extends WebSecurityConfigurerAdapter 配置文件里,每一个a ...