【温馨提示】源码包解压密码:
效果图:
描述说明:
Warp drive是一个轻量级的jQuery插件。可以帮助您创建一个很酷的交互式星空背景特效,这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动。
使用方法
在页面中引入jquery和jquery.warpdrive.min.js文件。
HTML结构
使用空的一个
元素来作为星空背景的容器。
初始化插件
在页面DOM元素加载完毕之后,可以通过纯js的方法来初始化该星空背景插件,或将它作为一个jquery插件来使用。
作为jquery插件来使用。$('#holder').warpDrive();
通过js方法来使用。varwarpdrive=newWarpDrive(document.getElementById('holder'));
配置参数
该html5星空背景特效插件的可用配置参数如下:varsettings={
width:480,/*width*/
height:480,/*height*/
autoResize:false,/*enable/disableautoResize*/
autoResizeMinWidth:null,/*setautoResizeminwidth*/
autoResizeMaxWidth:null,/*setautoResizemaxwidth*/
autoResizeMinHeight:null,/*setautoResizeminheight*/
autoResizeMaxHeight:null,/*setautoResizemaxheight*/
addMouseControls:true,/*enable/disablemousecontrols*/
addTouchControls:true,/*enable/disabletouchcontrols*/
hideContextMenu:true,/*enable/disablecanvascontextmenu*/
starCount:6666,/*countofactive/movingstars*/
starBgCount:2222,/*countofinactive/backgroundstars*/
starBgColor:{r:255,g:255,b:255},/*backgroundstarscolor*/
starBgColorRangeMin:10,/*backgroundstarscolorrangeminofstarBgColor*/
starBgColorRangeMax:40,/*backgroundstarscolorrangemaxofstarBgColor*/
starColor:{r:255,g:255,b:255},/*starscolor*/
starColorRangeMin:10,/*starscolorrangeminofstarBgColor*/
starColorRangeMax:100,/*starscolorrangemaxofstarBgColor*/
starfieldBackgroundColor:{r:0,g:0,b:0},/*backgroundcolor*/
starDirection:1,/*starsmovinginwhichdirection*/
starSpeed:20,/*starsmovingspeed*/
starSpeedMax:200,/*starsmovingspeedmax*/
starSpeedAnimationDuration:2,/*timeinsecondsfromstarSpeedtostarSpeedMax*/
starFov:300,/*fieldofview*/
starFovMin:200,/*fieldofviewmin*/
starFovAnimationDuration:2,/*timeinsecondsfromstarFovtostarFovMin*/
starRotationPermission:true,/*enable/disablerotation*/
starRotationDirection:1,/*rotationdirection*/
starRotationSpeed:0.0,/*rotationspeed*/
starRotationSpeedMax:1.0,/*rotationspeedmax*/
starRotationAnimationDuration:2,/*timeinsecondsfromstarRotationSpeedtostarRotationSpeedMax*/
starWarpLineLength:2.0,/*linelength*/
starWarpTunnelDiameter:100,/*tunneldiameter*/
starFollowMouseSensitivity:0.025,/*mousefollowsensitivity*/
starFollowMouseXAxis:true,/*enable/disablemousefollowxaxis*/
starFollowMouseYAxis:true/*enable/disablemousefollowyaxis*/
};
以jquery插件的方式来调用配置参数:$('#holder').warpDrive(settings);
通过纯js的方法来调用配置参数:varwarpdrive=newWarpDrive(document.getElementById('holder'),settings);
方法
该html5星空背景特效插件有两个可用的方法用于暂停和继续播放星空动画。
jquery:$('#holder').warpDrive('pause');
$('#holder').warpDrive('unpause');
js:warpdrive.pause();
warpdrive.unpause();
浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
【温馨提示】源码包解压密码:
郑重声明:
1、本站源码仅供个人学习研究和交流使用,请于下载后二十四小时内删除
2、本站大多资源来源于互联网、用户分享,仅供学习交流使用,本站不提供任何技术支持
3、本站联系方式Email:admin@ ,收到邮件会第一时间处理。
4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意