vue 粒子特效的示例代码


Posted in Javascript onSeptember 19, 2017

本文介绍了vue 粒子特效的示例代码,分享给大家,具体如下:

实现效果:

vue 粒子特效的示例代码

没错,你看到的上图那些类似于星座图的点和线,是由vue-particles生成的,而且能与用户鼠标事件产生互动。

传送门:vue-particles

使用教程

npm install vue-particles --save-dev

main.js文件:

import Vue from 'vue' 
import VueParticles from 'vue-particles' 
Vue.use(VueParticles)

App.vue 文件——一个简单的例子:

<template> 
  <div id="app">
   <vue-particles color="#dedede"></vue-particles>
  </div>
 </template>

App.vue 文件——一个完整的例子:

<template> 
  <div id="app">
   <vue-particles
    color="#dedede"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="circle"
    :particleSize="4"
    linesColor="#dedede"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
   >
   </vue-particles>
  </div>
 </template>

属性:

  • color: String类型。默认'#dedede'。粒子颜色。
  • particleOpacity: Number类型。默认0.7。粒子透明度。
  • particlesNumber: Number类型。默认80。粒子数量。
  • shapeType: String类型。默认'circle'。可用的粒子外观类型有:"circle","edge","triangle", "polygon","star"。
  • particleSize: Number类型。默认80。单个粒子大小。
  • linesColor: String类型。默认'#dedede'。线条颜色。
  • linesWidth: Number类型。默认1。线条宽度。
  • lineLinked: 布尔类型。默认true。连接线是否可用。
  • lineOpacity: Number类型。默认0.4。线条透明度。
  • linesDistance: Number类型。默认150。线条距离。
  • moveSpeed: Number类型。默认3。粒子运动速度。
  • hoverEffect: 布尔类型。默认true。是否有hover特效。
  • hoverMode: String类型。默认true。可用的hover模式有: "grab", "repulse", "bubble"。
  • clickEffect: 布尔类型。默认true。是否有click特效。
  • clickMode: String类型。默认true。可用的click模式有: "push", "remove", "repulse", "bubble"。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 三种编解码方式
Feb 01 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
AngularJS中的模块详解
Jan 29 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 #jQuery
慕课网题目之js实现抽奖系统功能
Sep 19 #Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 #jQuery
JavaScript事件处理程序详解
Sep 19 #Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 #jQuery
vue小图标favicon不显示的解决方案
Sep 19 #Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 #jQuery
You might like
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python动态加载模块的3种方法
2014/11/22 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
python 基于wx实现音乐播放
2020/11/24 Python
详解pandas赋值失败问题解决
2020/11/29 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
美国存储和组织商店:The Container Store
2017/08/16 全球购物
高一物理教学反思
2014/01/24 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
文明单位申报材料
2014/12/23 职场文书
2015年班组工作总结
2015/04/20 职场文书
公司庆典主持词
2015/07/04 职场文书
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android