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

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. Failed to get D-Bus connection: Operation not permitted

    通过centos7镜像创建了一个docker容器,并在容器中安装了一个apache服务,但是启动时发生如下报错 [root@1346963c2247 ~]# rpm -qa | grep httpdh ...

  2. nodejs+express安装配置（Linux版本）

    在ubuntu下面,直接从源里面安装nodejs的话,此版本还行,但是相关的express等,会比较老. 采用源码安装,先下载nodejs的源码,然后三步: ./configure make make ...

  3. LeetCode148：Sort List

    题目: Sort a linked list in O(n log n) time using constant space complexity. 解题思路: 根据题目要求,可知只能用归并排序,其他 ...

  4. CSS盒子坍塌问题的4种解决方案

    一.问题重述 嗯,这个就是坍塌的盒子了.外部盒子本应该包裹住内部的两个浮动盒子,结果却没有. 二.问题出现的原因 3个盒子都只设置了width,而没有规定height,内部两个盒子分别设置了左右浮动. ...

  5. EasyUi Grid以POST方式传送参数绑定

    function LoadList() {            $("#TableContainer").datagrid({                url: '/HM/ ...

  6. Asp.net Core 和类库读取配置文件信息

    Asp.net Core 和类库读取配置文件信息 看干货请移步至.net core 读取配置文件公共类 首先开一个脑洞,Asp.net core 被使用这么长时间了,但是关于配置文件(json)的读取 ...

  7. 显式等待-----Selenium快速入门（十）

    上一篇说了元素定位过程中的隐式等待,今天我们来探讨一下显示等待.显式等待,其实就是在使用WebDriverWait这个对象,进行等待.显式等待对比隐式等待,多了一些人性化的设置,可以说是更细化的隐式等 ...

  8. 日期时间类——Java常用类

    时间戳(timestamp):距离特定时间的间隔. 计算机中的时间戳是指距离历元(1970-01-01 00:00:00:000)的时间间隔(ms). 格林尼治时间(GMT):是一个标准时间,用于全球 ...

  9. 程序猿的日常——Java基础之抽象类与接口、枚举、泛型

    再次回顾这些基础内容,发现自己理解的又多了一点.对于一些之前很模糊的概念,渐渐的清晰起来. 抽象类与接口 抽象类通常是描述一些对象的通用方法和属性,并且默认实现一些功能,它不能被实例化.接口仅仅是描述 ...

  10. php内核为变量的值分配内存的几个宏

    在php5.3之前,为某变量分配内存是用宏 MAKE_STD_ZVAL; 737 #define MAKE_STD_ZVAL(zv) \ # /Zend/zend.h738 ALLOC_ZVAL(zv ...