渣渣css/js登录页面
2019-09-26 本文已影响0人
磨陀货_
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梦幻登录</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
overflow: hidden;
}
#bg_wrap {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
#bg_wrap div {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
/* 设置透明度 */
transition: opacity 3s;
}
/* nth-of-type(1) *筛选选择器选择第一个*/
#bg_wrap div:nth-of-type(1) {
opacity: 1;
}
#Login {
width: 272px;
height: 300px;
margin: 200px auto;
}
#Login .move {
position: absolute;
top: -100px;
z-index: 999;
}
#Login h3 {
width: 270px;
font-size: 30px;
font-weight: 700;
color: #fff;
font-family: '微软雅黑';
text-align: center;
margin-bottom: 30px;
cursor: move;
}
#Login input.text {
width: 270px;
height: 42px;
color: #fff;
background: rgba(45, 45, 45, 0.15);
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 1.0) inset;
text-indent: 10px;
}
#Login input.btn {
/* top: 280px; */
background: #ef4300;
width: 272px;
height: 44px;
border-radius: 6px;
color: #fff;
box-shadow: 0 15px 30px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 7px 0 rgba(0, 0, 0, 0.2);
border: 0;
text-align: center;
}
input::-webkit-input-placeholder {
color: #fff;
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
</style>
<%@ include file="/WEB-INF/views/head.jsp"%>
<script>
// 检查自己是否是顶级页面 /login
if (top != window) {// 如果不是顶级
//把子页面的地址，赋值给顶级页面显示
window.top.location.href = window.location.href;
}
//var url = "/login";
//就是点击登录后成功跳转的页面
function submitForm(){
// alert("ss");
// loginForm 登录表单
$('#loginForm').form('submit', {
url:"/login",
//url:url,
onSubmit: function(){
return $(this).form('validate');
},
success:function(data){
//把一个json字符串转成一个json对象
var result = JSON.parse(data);
//登录成功跳到主页面，登录失败给出提示
if(result.success){
//js的跳转(BOM:浏览器对象模型)
window.location.href = "/main";
}else{
$.messager.alert('警告',result.msg,"info");
}
}
});
}
//回车登录
$(document.documentElement).on("keyup", function(event) {
//console.debug(event.keyCode);
var keyCode = event.keyCode;
console.debug(keyCode);
if (keyCode === 13) { // 捕获回车
submitForm(); // 提交表单
}
});
</script>
</head>
<body>
<%--图片--%>
<div id="bg_wrap">
<div><img src="/images/head/1.jpg" width="100%" height="100%"></div>
<div><img src="/images/head/2.jpg" width="100%" height="100%"></div>
<div><img src="/images/head/3.jpg" width="100%" height="100%"></div>
<div><img src="/images/head/4.jpg" width="100%" height="100%"></div>
<div><img src="/images/head/5.jpg" width="100%" height="100%"></div>
<div><img src="/images/head/6.jpg" width="100%" height="100%"></div>
<div><img src="/images/head/8.jpg" width="100%" height="100%"></div>
<div><img src="/images/head/9.jpg" width="100%" height="100%"></div>
<div><img src="/images/head/10.jpg" width="100%" height="100%"></div>
<div><img src="/images/head/11.jpg" width="100%" height="100%"></div>
<div><img src="/images/head/12.jpg" width="100%" height="100%"></div>
<div><img src="/images/head/13.jpg" width="100%" height="100%"></div>
</div>
<div id="Login">
<h3 id="title" class="move">來啦 小老弟~~</h3>
<form id="loginForm" method="post" action="/#">
<input type="text" placeholder="账号" class="text move" name="username" id="username">
<input type="password" placeholder="密码" class="text move" name="password" id="password">
<input type="button" value="走 妳" class="btn move" onclick="submitForm()">
</form>
</div>
<script type="text/javascript">
/*背景渐变*/
/*function(){} 匿名函数
()() IIFE匿名函数立刻执行，函数自执行体*/
//主要是图片变浅等
(function() {
var timer = null; //声明定时器
var oImg = document.querySelectorAll('#bg_wrap div') //h5最新元素获取写法获取到的是一组元素
//querySelector获取单个元素的 兼容ie8
var len = oImg.length; //3
var index = 0;
timer = setInterval(function() {
oImg[index].style.opacity = 0;
index++;
// if(index>=3){
// index=0;
// }
index %= len; //index=index%len求模取余 0%3=0; 1%3=1; 2%3=2; 3%3=0;
oImg[index].style.opacity = 1;
}, 3000);
})();
// 重力模拟弹跳系统
(function() {
/*
改变定位元素的top值
达到指定位置之后进行弹跳一次
多个元素一次运动
动画序列*/
var oMove = document.querySelectorAll('.move');
var oLen = oMove.length;
var timer = null;
var timeout = null;
var speed = 3; //移动距离
move(oLen - 1);
function move(index) {
if (index < 0) {
clearInterval(timer); //清除循环定时器
clearTimeout(timeout); //清除延时定时器
return; //终止函数
}
var endTop = 150 + (index * 60); //根据下标计算endTop值
timer = setInterval(function() {
speed += 3;
var T = oMove[index].offsetTop + speed; //设置每一次的top值
if (T > endTop) {
T = endTop;
speed *= -1 //取反，让移动距离变为负数
speed *= 0.4;
//慢慢停下来
}
oMove[index].style.top = T + 'px';
}, 20);
timeout = setTimeout(function() {
clearInterval(timer);
index--;
console.log(9);
move(index);
console.log(index);
}, 900) //过900毫秒之后再执行方法里的代码
}
})()
</script>
</body>
</html>
