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

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. 【 PLSQL Developer安装、tnsnames.ora配置 解答】

    使用plsql远程连接数据库需要安装plsql工具+ oracle的远程客户端 在不登录的状态打开plsql: 点击工具---首选项:指定oracle客户端的安装路径: C:\javaSoft\PLS ...

  2. 网易云首席安全架构师谈安全新形势：DDOS两三天，游戏玩家数从几万降到几百

    本文由  网易云发布. 安全是一个永恒的话题,在业务不断云化.攻击越来越复杂的当下,互联网安全呈现了出什么样的严峻形势?对这些形势,网易云又是如何应对的? 网易云首席安全架构师沈明星 4月13日,网易 ...

  3. 769. Max Chunks To Make Sorted

    Given an array arr that is a permutation of [0, 1, ..., arr.length - 1], we split the array into som ...

  4. CF特征码遍历

    HOOK_游戏代码 8B 00 8B 08 8B 91 A8 00 00 00 地址-15 4E5E954E5EA 44E5E95DIRECT 从733E00开始搜 6B 00 94 51 6C 地址 ...

  5. 基于Zookeeper实现的分布式互斥锁 - InterProcessMutex

    Curator是ZooKeeper的一个客户端框架,其中封装了分布式互斥锁的实现,最为常用的是InterProcessMutex,本文将对其进行代码剖析 简介 InterProcessMutex基于Z ...

  6. Lucence工作原理

    lucence 是一个高性能的java全文检索工具包,他使用倒排序文件索引结构,改结构和相应的生成算法如下: 一.设有两篇文章1和2      文章1的内容为:Tom lives in guangzh ...

  7. OC basic

    不能在栈上分配对象 //Interface type cannot be statically allocated NSString stackString; 因为对象所占内存总是分配在"堆 ...

  8. 如何解决liunx链接远程数据库10038错误提示

    关于在windows下链接liunx系统下远程数据库报错2003--提示10038的解决方案如下: 在liunx系统中安装配置mysql数据库默认是没有对外开启3600端口,如果出现10038: 1, ...

  9. MySql登陆密码忘记-解决方案

    方法一:MySQL提供跳过访问控制的命令行参数,通过在命令行以此命令启动MySQL服务器: safe_mysqld --skip-grant-tables& 即可跳过MySQL的访问控制,任何 ...

  10. 部分替换mysql表中某列的字段

    UPDATE `table_name` SET `field_name` = replace (`field_name`,'from_str','to_str') WHERE `field_name` ...