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 07 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
Python调用.NET库的方法步骤
2019/12/27 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
python对Excel的读取的示例代码
2020/02/14 Python
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
运动会解说词50字
2014/01/18 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
党员年度个人总结
2015/02/14 职场文书
英文辞职信范文
2015/05/13 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
无线电知识基础入门篇
2022/02/18 无线电
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL