Layui学习之酷炫登录界面，粒子特效

最新推荐文章于 2024-08-08 07:20:11 发布

香菇青菜包

最新推荐文章于 2024-08-08 07:20:11 发布

阅读量6.9k

点赞数 1

文章标签： Layui

本文链接：https://blog.csdn.net/qq_41850449/article/details/89306410

版权

page_register.html:

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src=jquery-1.8.0.min.js></script>     <!--jquery-->
<script type="text/javascript" src=layer-v3.1.1/layer/layer.js></script>  <!--弹层文件-->
<title>设备管理平台</title>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-	scalable=0" name="viewport">

<!-- <meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">-->

<link rel="stylesheet" href="login/css/style.css"/>        <!--界面布局-->
<!-- 提示升级高级浏览器操作 -->
<style>
	.ie-content{  position: fixed; left: 0; top: 0; right: 0; bottom:0; background:#fff; z-index: 1000;}
	.ie-content-bj{ width: 1000px; height: 380px; position: fixed; left: 50%; top: 36%; margin:-190px 0 0 -500px; background:url(img/sj.jpg) no-repeat; }
	.ie-list{ padding:168px 0 0 371px; }
	.ie-list a{ margin-right: 80px; }

	#particles-js {
        width: 100%;
        height: 100%;
        /* background: #000; */
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
</style>
</head>
<body class="body_bj">
	<div id="particles-js">       <!--对应上面style里的设置-->
		<div class="login">
			<!--<div class="logo">    //插入图片
				<img src="login/img/logo.png" alt="">
			</div>-->
			<ul class="login-list">
				<li><input type="text" placeholder="请输入用户名" style="margin-top: 20px" id="uname"></li>
				<li><input type="password" placeholder="请输入密码" id="upwd"></li>
				<!--<li><input type="text" placeholder="请输入验证码"><span class="yzm2"><img src="login/img/yzm.jpg" alt=""></span></li>-->
				<li><a class="btn" href="" regiser() >登 录</a></li>
				<li class="tar"><a href="忘记密码.html">忘记密码？</a></li>
		</ul>
		</div>
	</div>
	<!--[if lt IE 8]>
	<div class="ie-content">
		<div class="ie-content-bj">
    		<div class="ie-list">
	    		<a href="http://www.google.cn/intl/zh-CN/chrome/browser/"><img src="img/sj1.jpg" alt=""></a>
				<a href="http://www.firefox.com.cn/"><img src="img/sj2.jpg" alt=""></a>
				<a href="http://chrome.360.cn/"><img src="img/sj3.jpg" alt=""></a>	
    		</div>
		</div>
	</div>
	<![endif]-->

<script src="layui/layui.js"> </script>      <!--layui插件-->
<script type="text/javascript" src="js/particles.min.js"></script>     <!--粒子特效插件-->

<script type="text/javascript">
	particlesJS('particles-js',       //实现粒子特效
	{
		"particles": {
			"number": {
				"value": 40,  //数量
				"density": {
					"enable": true,
					"value_area": 800
				}
			},
			"color": {
				"value": "#ffffff"
			},
			"shape": {
				"type": "circle",
				"stroke": {
					"width": 0,
					"color": "#000000"
				},
				"polygon": {
					"nb_sides": 5
				},
				"image": {
					/*"src": "img/github.svg",*/
					"width": 100,
					"height": 100
				}
			},
			"opacity": {
				"value": 0.3,
				"random": false,
				"anim": {
					"enable": false,
					"speed": 1,
					"opacity_min": 0.1,
					"sync": false
				}
			},
			"size": {
				"value": 3,
				"random": true,
				"anim": {
					"enable": false,
					"speed": 40,
					"size_min": 0.1,
					"sync": false
				}
			},
			"line_linked": {
				"enable": true,
				"distance": 150,
				"color": "#ffffff",
				"opacity": 0.4,
				"width": 1
			},
			"move": {
				"enable": true,
				"speed": 1,
				"direction": "none",
				"random": false,
				"straight": false,
				"out_mode": "out",
				"bounce": false,
				"attract": {
					"enable": false,
					"rotateX": 600,
					"rotateY": 1200
				}
			}
		},
		"interactivity": {
			"detect_on": "canvas",
			"events": {
				"onhover": {
					"enable": true,
					"mode": "grab"
				},
				"onclick": {
					"enable": false,
					"mode": "push"
				},
				"resize": true
			},
			"modes": {
				"grab": {
					"distance": 150,
					"line_linked": {
						"opacity": 1
					}
				},
				"bubble": {
					"distance": 400,
					"size": 40,
					"duration": 2,
					"opacity": 8,
					"speed": 3
				},
				"repulse": {
					"distance": 200,
					"duration": 0.4
				},
				"push": {
					"particles_nb": 4
				},
				"remove": {
					"particles_nb": 2
				}
			}
		},
		"retina_detect": false
	}
);

	//登录
	function regiser(){
	   var id = document.getElementById("uname").value; 
   	   var pw = document.getElementById("upwd").value; 
	   
	   var r=$.ajax({
		url: "http://127.0.0.1:7000",
		data: {function:0,id:id,data:pw},        //id是用户名，data是密码
		type: 'post',                            //所有功能发送格式一致
		success: function(result){
			if(result=="correct")
				{
					alert("登录成功");
					window.open('page_main.html','_self');
				}
			else 
				alert("登录失败");

	 	},
		error:function()
			 {
				 alert("error"); 
			 }
		});
	
   }

</script>
</body>
</html>

全套下载地址：https://download.csdn.net/download/qq_41850449/11116385
还附了主页面