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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 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
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
PHP new static 和 new self详解
2017/02/19 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
浅谈Fetch 数据交互方式
2018/12/20 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[19:15]DK战队纪录片
2014/09/02 DOTA
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
Python和php通信乱码问题解决方法
2014/04/15 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
Python如何将装饰器定义为类
2020/07/30 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
单位创先争优活动方案
2014/01/26 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
医学生个人求职信范文
2014/02/07 职场文书
财务总监岗位职责
2014/03/07 职场文书
捐资助学倡议书
2014/04/15 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
小学信息技术教学反思
2016/02/16 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android