JavaScript实现鼠标移动粒子跟随效果

本文实例为大家分享了JavaScript实现鼠标移动粒子跟随效果的具体代码，供大家参考，具体内容如下

※ 如上图是最终显示效果，跟随鼠标的移动，生成的粒子跟随。

需要用到的js库：Underscore。Underscore是一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。它是这个问题的答案：“如果我在一个空白的HTML页面前坐下，并希望立即开始工作，我需要什么？”...它弥补了部分jQuery没有实现的功能，同时又是Backbone.js必不可少的部分。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鼠标粒子demo</title>
  <style>
    canvas { background: #333; }
  </style>
</head>
<body>
  <canvas width="800" height="500">您的浏览器不支持此标签！</canvas>
  <script src="js/underscore.min.js"></script>
  <script>
    // 获取canvas元素
    var cvs = document.querySelector("canvas");
    // 获取上下文对象
    var ctx = cvs.getContext("2d");
    // 声明一个空数组，用来放后面生成的小球
    var ballsArr = [];

    // 创建一个小球类
    function Balls (x, y){
      // 坐标x为传进来的x
      this.x = x;
      // 坐标y为传进来的y
      this.y = y;
      // 生成的小球半径为5到10中的任一整数（参数随便）
      this.r = _.random(5, 10);
      // 生成的小球的颜色为这七种颜色中的随机一种（参数随便）
      this.c = _.sample(["red", "orange", "yellow", "green", "cyan", "blue", "white"]);
      // 小球坐标x的增量为-4到4之间的整数（参数随便）
      this.dx = _.random(-4, 4);
      // 小球坐标y的增量为-4到4之间的整数（参数随便）
      this.dy = _.random(-4, 4);
      // 把生成的小球存入数组ballsArr
      ballsArr.push(this);
    }

    // 给所有Balls绑定一个方法update，目的是为了每次都能按照随机方向移动
    Balls.prototype.update = function (){
      // 每次x坐标加上增量dx
      this.x += this.dx;
      // 每次y坐标加上增量dy
      this.y += this.dy;
      // 每次半径缩小0.5（参数随便）
      this.r -= 0.5;
      // 半径小于等于0的话，就从小球数组中移出
      if(this.r <= 0){
        _.without(ballsArr, this);
      }
    }

    // 给所有Balls绑定一个方法render，目的是画圆。
    Balls.prototype.render = function (){
      // 半径小于等于0就没必要画了
      if(this.r <= 0){
        return;
      }
      // 开始绘制
      ctx.beginPath();
      // 绘制圆形，（圆心坐标x，圆心坐标y， 起始弧度，终止弧度，[顺逆时针]）
      ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI);
      // 颜色为数组中随机的一个
      ctx.fillStyle = this.c;
      // 画上画布
      ctx.fill();
      // 终止绘制
      ctx.closePath();
    }

    // onmousemove事件监听
    cvs.onmousemove = function (){
      // 在当前鼠标的位置，生成俩球，然后只要鼠标移动就一直生成小球，每次两个
      new Balls(event.offsetX, event.offsetY);
      new Balls(event.offsetX, event.offsetY);
    }

    // setInterval 模拟25FPS的帧率
    setInterval(function (){
      // 因为canvas上屏即像素化，所以先清屏
      ctx.clearRect(0, 0, cvs.width, cvs.height);
      // _.each方法是针对每一个前面的元素，都运行后面的方法
      _.each(ballsArr, function (value){
        value.update();
        value.render();
      });
    }, 40);

  </script>
</body>
</html>

里面用到的underscore中的几个方法，可以到 doc/underscore/中去查看具体的解释。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js控制鼠标事件移动及移出效果显示

    鼠标事件的移动及移出效果都可以使用js来自定义,下面有个示例,效果为当事件发生改变时背景颜色也随着改变,适合新手朋友 <style type="text/css"> .style0{ background-color:#FFFF00; } .style1{ background-color:#00FFFF; } </style> </head> <body> <table width="576" height=&

  • js实现鼠标左右移动，图片也跟着移动效果

    效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动.图片距离越远偏移距离越大. 思路:首先获取图片原先的距离.设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative:图片position:absolute; <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title

  • javascript实现图片跟随鼠标移动效果的方法

    本文实例讲述了javascript实现图片跟随鼠标移动效果的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片跟着鼠标走</title&g

  • JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)

    JavaScript获取鼠标移动时的坐标(兼容:IE8.谷歌.Firefox.Opera ),测试通过 直接复制成html文件,即可运行. 为方便大家测试特准备了一份在线演示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

  • js鼠标移动在title中显示图片的效果代码

    1.js代码 复制代码 代码如下: //***********默认设置定义.********************* tPopWait=50;//停留tWait豪秒后显示提示. tPopShow=5000;//显示tShow豪秒后关闭提示 showPopStep=20; popOpacity=99; //***************内部变量定义***************** sPop=null; curShow=null; tFadeOut=null; tFadeIn=null; tFa

  • 鼠标拖拽移动子窗体的JS实现

    鼠标拖拽移动子窗体的JS实现

    1.子窗体 在设计网站的时候,我们需要设计一些模态的子窗体,比如 这一步很容易实现,只需要div+css就ok了,请看代码: 复制代码 代码如下: <div class="modal-background"></div>    <div class="modal-window">        <div class="head">            <center>点住着块区域可以改

  • JS实现鼠标移动到缩略图显示大图的图片放大效果

    JS实现鼠标移动到缩略图显示大图的图片放大效果

    一个网页上用的图片提示效果,当把鼠标移动到图片缩略图的时候,会显示图片大图,似乎在网上这是个很常见的效果,实现方法也比较多,有人用CSS,有人用JavaScript,有人用jQuery,总之,选择自己习惯的方式去实现,就是最棒的. 图片提示效果 body{margin:0 ;padding:40px;line-height:180%;} img{border:none;} ul,li{margin:0 ;padding:0;} li{list-style:none;display:inline;

  • js+html+css实现鼠标移动div实例

    js: 复制代码 代码如下: var posX; var posY; fdiv = document.getElementById("divBody"); document.getElementById("divHead").onmousedown=function(e) { if(!e) e = window.event; //IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - p

  • js图片跟随鼠标移动代码

    js图片跟随鼠标移动代码

    在很多网站上能看到图片跟随鼠标移动的JS特效,其实做法很简单,在这里与大家分享下. 在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里,http://www.jb51.net/article/17266.htm. 我们用到的只有这个对象的两个属性,clientX与clientY,就是触发当前事件(可能是Click,也肯能是onmousemove等等事件)时鼠标在窗口区域的X,Y坐标(它们都是只读属性,所以只

  • js实现文字跟随鼠标移动而移动的方法

    本文实例讲述了js实现文字跟随鼠标移动而移动的方法.分享给大家供大家参考.具体分析如下: 这是一款非常简单的鼠标特性代码,在网页中移动鼠标的时候,后面跟着一串文字跟随者鼠标移动 复制代码 代码如下: <html> <head> <style type="text/css"> .spanstyle { COLOR: 000000; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY:

随机推荐