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 相关文章推荐
IE6 fixed的完美解决方案
Mar 31 Javascript
javascript 快速排序函数代码
May 30 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
使用vue for时为什么要key【推荐】
Jul 11 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 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
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
详解React中setState回调函数
2018/06/14 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
Vuex实现数据共享的方法
2019/12/20 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
Python多线程编程(五):死锁的形成
2015/04/05 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
pandas分批读取大数据集教程
2020/06/06 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
卖房协议书样本
2014/10/30 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
优秀教师单行材料
2014/12/16 职场文书
客户答谢会致辞
2015/01/20 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书