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 相关文章推荐
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
vue debug 二种方法
Sep 16 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
详解JavaScript中的this指向问题
Feb 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
Javascript 不能释放内存.
2006/09/07 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
layerUI下的绑定事件实例代码
2018/08/17 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Python实现Kmeans聚类算法
2020/06/10 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
简单了解python代码优化小技巧
2019/07/08 Python
python如何实现复制目录到指定目录
2020/02/13 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
元旦活动感言
2014/03/08 职场文书
求职信范文大全
2014/05/26 职场文书
银行求职信
2014/05/31 职场文书
体育运动口号
2014/06/09 职场文书
毕业证委托书范文
2014/09/26 职场文书
公司介绍信范文
2015/01/31 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL