页面粒子效果-登录页面

Particleground是一个JavaScript插件，用于时髦的后台粒子系统。包括鼠标在桌面设备和移动设备上的陀螺仪控制的可选视差效果。在支持HTML5画布的浏览器中工作。

相关链接

Github地址：https://github.com/jnicol/particleground
官网示例地址：http://jnicol.github.io/particleground/
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta charset="UTF-8"> <meta name="keywords" content="进销存|库房管理|WMS|企业管理软件|贸易通|批发库存管理|利润管理系统|发票管理系统|门店管理系统|商铺管理系统" /> <meta name="description" content="进销存|库房管理|WMS|企业管理软件|贸易通|批发库存管理|利润管理系统|发票管理系统|门店管理系统|商铺管理系统" /> <title>进销存管理系统</title> <meta name="author" content="进销存开发团队" /> <style> canvas { z-index: 1; position:absolute; width : 100%; height :100%; } </style> <style>
body {
background: url(static/images/login/bg.jpg) repeat-x top center;
background-color: #084f8d9c;
}

.login_box {
margin: 0 auto;
width: 1024px;
height: 725px;
background: url(static/images/login/login_bg.png) no-repeat;
}

.login_text {
font-size: 13px;
color: #075398;
width: 270px;
padding: 320px 0px 0px 470px;
}

.login_row {
height: 33px;
vertical-align: middle;
}

.login_submit {
padding-left: 50px;
}

.text_bg {
background: url(static/images/login/input_bg.jpg) no-repeat;
width: 182px;
height: 27px;
border: none;
margin-bottom: -4px;
}

.code_bg {
width: 90px;
border-right: 1px solid #88b0dc;
}
-->
</style>
<script src="./static/js/jquery.js"></script> <script src="./static/js/verifyCode.js"></script> <script src="./static/js/Particleground.js"></script> <script> $(document).ready(function() { //粒子背景特效 $('body').particleground({ dotColor : '#5cbdaa', lineColor : '#5cbdaa' });
复制代码
```
  	$("#loginBtn").click(function() {
  		$.post("./user/login", {
  			userName : $("#userName").val(),
  			password : $("#password").val(),
  			imageCode : $("#imageCode").val()
  		}, function(result) {
  			console.log(result);
  			if (result.success) {
  				window.location.href = "main.html";
  			} else {
  				alert(result.errorInfo);
  			}
  		});
  	});
  });
```
</script> </head> <body>
复制代码
```
  	<dl class="login_text;" style="z-index: 9999;position: relative;top:31%;left:44%;">

  		<dd class="login_row" style="margin-top: -100px; margin-left: -150px; font-size: 30px; color: #ffffff;">
  			<p>进销存管理系统</p>
  		</dd>

  		<dd class="login_row">
  			 
  		</dd>

  		<dd class="login_row"  style="color: #ff0000;">
  			 演示版：帐号和密码都是admin 
  		</dd>

  		<dd class="login_row">
  			 
  				帐号：<input type="text" id="userName" placeholder="账号"
  					class="text_bg" />
  			 
  		</dd>

  		<dd class="login_row">
  			 
  				密码：<input type="password" id="password" placeholder="密码"
  					class="text_bg" />
  			 
  		</dd>
  		<dd class="login_row">
  			 
  				验证码:<input type="text" id="imageCode" name="imageCode"
  					style="margin-bottom: -5px;" placeholder="验证码" maxlength="4"
  					class="text_bg code_bg"> <img id="imgObj" title="看不清，换一张"
  					src="./drawImage" onclick="changeImg()"
  					style="margin-bottom: -5px;" />
  			 
  		</dd>
  		<dd class="login_row" >
  			<input type="image" id="loginBtn" value="立即登陆"
  				src="./static/images/login/submit_btn.jpg" /> <input type="image"
  				id="retsetBtn" value="取消" src="./static/images/login/reset_btn.jpg" />
  		</dd>

  	</dl>

  

  </div>
```
</body> </html>