初始化插件

在页面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();

浏览器启用弹出窗口过滤功能，将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了！

【温馨提示】源码包解压密码：www.youhutong.com

郑重声明：

1、本站源码仅供个人学习研究和交流使用，请于下载后二十四小时内删除

2、本站大多资源来源于互联网、用户分享，仅供学习交流使用，本站不提供任何技术支持

3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。

4、如侵犯到任何版权问题，请立即告知本站(立即在线告知)，本站将及时删除并致以最深的歉意