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

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. ASP.NET Web API 2.0 统一响应格式

    传统实现 在搭建 Web API 服务的时候,针对客户端请求,我们一般都会自定义响应的 JSON 格式,比如: { "Data" : { "Id" : 100, ...

  2. Json/XML序列化和反序列化

    1.json序列化和反序列化 序列化是将对象状态转换为可保持或传输的格式的过程; 反序列化,它将流转换为对象; 1)Json.Net 推荐使用Json.Net类库,需要引入的命名空间; 序列化:Jso ...

  3. Restframework 频率throttle组件实例-3

    频率逻辑: from rest_framework.throttling import BaseThrottle import time VISIT_RECORD={} class VisitThro ...

  4. 用layui遇到过的问题

    1.报错“layui.form is not a function”问题 把代码中这一串修改一下:form = layui.form(); 括号去掉就行: form = layui.form; 如果你 ...

  5. AVL树的实现——c++

    一.概念 AVL树是根据它的发明者G.M. Adelson-Velsky和E.M. Landis命名的.它是最先发明的自平衡二叉查找树,也被称为高度平衡树.相比于"二叉查找树",它 ...

  6. python 初步认识Flask

    1.简介 flask 问题一:  访问百度的流程? a. 客户端: 发送请求报文,  请求行, 请求头, 请求体 b.服务端: 解析请求的报文, 解析域名, 进行路由匹配分发找到对应的视图函数, 打包 ...

  7. SQL 高效的万能分页存储过程

    代码如下: USE [Blog] IF OBJECT_ID('Proc_Paging', 'P') IS NOT NULL --删除同名存储过程 DROP PROC Proc_Paging GO CR ...

  8. python学习笔记03-用户输入

    name=Input(“your name”)  此处接受的数据类型为字符串 整数转字符串  str(123) 整数转字符串  int(“123”)

  9. Unity 使用有限状态机 完美还原 王者荣耀 虚拟摇杆

    Unity 使用有限状态机 完美还原 王者荣耀 虚拟摇杆 效果如图所示 摇杆的UI组成 如图所示 简单的可以认为摇杆由1.2.3贴图组成 为摇杆的底座 为摇杆的杆 为摇杆的指向 可以理解这就是街机上的 ...

  10. 【LeetCode】414. 第三大的数

    给定一个非空数组,返回此数组中第三大的数.如果不存在,则返回数组中最大的数.要求算法时间复杂度必须是O(n). 示例 1: 输入: [3, 2, 1] 输出: 1 解释: 第三大的数是 1. 示例 2 ...