插件描述：jquerywarpdriveplugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件。这个星空背景特效可通过配置参数进行灵活的配置，可用鼠标进行互动。
Warp drive是一个轻量级的jQuery插件。可以帮助您创建一个很酷的交互式星空背景特效,这个星空背景特效可通过配置参数进行灵活的配置，可用鼠标进行互动。
使用方法
在页面中引入jquery和jquery.warpdrive.min.js文件。
<script src=""path/to/js/jquery.min.js"></script> <script src=""path/to/js/jquery.warpdrive.min.js"></script>
HTML结构
使用空的一个<div>元素来作为星空背景的容器。
<div id='holder'></div>
初始化插件
在页面DOM元素加载完毕之后，可以通过纯js的方法来初始化该星空背景插件，或将它作为一个jquery插件来使用。
作为jquery插件来使用。
$( '#holder' ).warpDrive();
通过js方法来使用。
var warpdrive = new WarpDrive( document.getElementById( 'holder' ) );
配置参数
该html5星空背景特效插件的可用配置参数如下：
var settings = {
width: 480,/*width*/
height: 480,/*height*/
autoResize: false,/*enable/disable autoResize*/
autoResizeMinWidth: null,/*set autoResize min width*/
autoResizeMaxWidth: null,/*set autoResize max width*/
autoResizeMinHeight: null,/*set autoResize min height*/
autoResizeMaxHeight: null,/*set autoResize max height*/
addMouseControls: true,/*enable/disable mouse controls*/
addTouchControls: true,/*enable/disable touch controls*/
hideContextMenu: true,/*enable/disable canvas context menu*/
starCount: 6666,/*count of active/moving stars*/
starBgCount: 2222,/*count of inactive/background stars*/
starBgColor: { r:255, g:255, b:255 },/*background stars color*/
starBgColorRangeMin: 10,/*background stars color range min of starBgColor*/
starBgColorRangeMax: 40,/*background stars color range max of starBgColor*/
starColor: { r:255, g:255, b:255 },/*stars color*/
starColorRangeMin: 10,/*stars color range min of starBgColor*/
starColorRangeMax: 100,/*stars color range max of starBgColor*/
starfieldBackgroundColor: { r:0, g:0, b:0 },/*background color*/
starDirection: 1,/*stars moving in which direction*/
starSpeed: 20,/*stars moving speed*/
starSpeedMax: 200,/*stars moving speed max*/
starSpeedAnimationDuration: 2,/*time in seconds from starSpeed to starSpeedMax*/
starFov: 300,/*field of view*/
starFovMin: 200,/*field of view min*/
starFovAnimationDuration: 2,/*time in seconds from starFov to starFovMin*/
starRotationPermission: true,/*enable/disable rotation*/
starRotationDirection: 1,/*rotation direction*/
starRotationSpeed: 0.0,/*rotation speed*/
starRotationSpeedMax: 1.0,/*rotation speed max*/
starRotationAnimationDuration: 2,/*time in seconds from starRotationSpeed to starRotationSpeedMax*/
starWarpLineLength: 2.0,/*line length*/
starWarpTunnelDiameter: 100,/*tunnel diameter*/
starFollowMouseSensitivity: 0.025,/*mouse follow sensitivity*/
starFollowMouseXAxis: true,/*enable/disable mouse follow x axis*/
starFollowMouseYAxis: true/*enable/disable mouse follow y axis*/
};以jquery插件的方式来调用配置参数：
$( '#holder' ).warpDrive( settings );
通过纯js的方法来调用配置参数：
var warpdrive = new WarpDrive( document.getElementById( 'holder' ), settings );
方法
该html5星空背景特效插件有两个可用的方法用于暂停和继续播放星空动画。
jquery：
$( '#holder' ).warpDrive( 'pause' ); $( '#holder' ).warpDrive( 'unpause' );
js：
warpdrive.pause(); warpdrive.unpause();
PREVIOUS:
NEXT:
相关插件-动画效果
讨论这个项目（15）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
if you 0
2017/12/21 12:04:16
眼睛都看花了；饿
不减肥成功决不改名0
2017/12/21 15:26:22
别天天看代码呀，偶尔出去走一走，旅旅游，然后你会发现还特么不如在家里看代码。哈哈
SiriBen0
2017/12/22 9:26:17
他指的眼花不是代码，而是星空，哈哈哈
不减肥成功决不改名0
2017/12/23 18:32:29
有种老司机开车，漂移想吐的感觉
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
