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 相关文章推荐
js实现身份证号码验证的简单实例
Feb 19 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 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
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python字符串切片操作知识详解
2016/03/28 Python
Python 的类、继承和多态详解
2017/07/16 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
证婚人搞笑证婚词
2014/01/10 职场文书
财务会计自荐信范文
2014/02/21 职场文书
应聘教师求职信
2014/07/19 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
高考学习决心书
2015/02/04 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript