<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Day7</title>
<style>
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {
padding: 0px;
margin: 0px;
}
.login {
width: 512px;
position: absolute;
border: #ebebeb solid 1px;
height: 280px;
left: 50%;
right: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
margin-left: -250px;
margin-top: 140px;
display: none;
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
position: relative;
cursor: move;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.login-input-content {
margin-top: 20px;
}
.login-button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
.login-bg {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: #000000;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
display: none;
}
a {
text-decoration: none;
color: #000000;
}
.login-button a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
</style>
</head>
<body>
<input type="button" value="按钮1" id="btn1">
<input type="button" value="按钮2" id="btn2">
<script>
/*
每一个函数都有实际参数，在函数执行时存放在arguments这个类数组对象里。即使函数没有形参列表，在函数执行时arguments里仍然有内容，存放函数的基本信息
对于事件处理函数，arguments里存有事件参数对象及其他信息，其中事件参数对象里存有事件的具体信息。
* */
function f1() {
console.log(arguments);
}
f1(); //可以看到输出一个数组
var btn1 = document.getElementById("btn1");
btn1.onclick = function () {
console.log(arguments);//实参对象，里面有这个事件处理函数的相关信息
console.log(arguments[0]);//第一个元素就是事件参数对象，这里名字为mouseEvent，里面存放着这个事件的基本信息
}
var btn2 = document.getElementById("btn2");
btn2.onclick = function (e) {
console.log(arguments);
console.log(arguments[0]);
console.log(e); //也可以利用这种方法获得事件参数队象，即事件处理函数默认存在的一个形参
console.log(window.event);//也可以用window.event获取事件参数对象
var e = window.event || e;//最兼容写法
console.log(e);
}
</script>
<br>
<a href="http://www.baidu.com" id="a1">百度</a>
<script>
/*
* 阻止默认事件的方法：1.在事件处理函数中return false
* 2.利用事件参数对象里的preventDefault方法
* 3.超链接内部写入:href = "javascript:void(0)"表示该部分等待以后添加，这个超链接暂时不指向任何地址
* 4.锚点定位，常用#定位到页面顶部，用#id值 定位到id为该值的标签位置
* 还可以用name定位，在a中添加name属性值，也可以用#属性值定位到该位置,name定位只能针对a标签来定位，而对div等其他标签就不能起到定位作用。
*
* */
var a = document.getElementById("a1");
a.onclick = function (e) {
console.log("ss");
//return false; //可以阻止超链接跳转
e.preventDefault();//也可以阻止超链接跳转，IE8不支持
}
</script>
<script>
/*
*
*offset系列:
offsetLeft:获取元素距离最左边的距离，自身的margin包括在内，不包括自身的border
offsetTop:获取元素距离最上边的距离，自身的margin包括在内，不包括自身的border
offsetWidth:获取元素的宽度，包括border及以内，不包括margin
offsetHeight:获取元素的高度，包括border及以内，不包括margin
offsetParent:获取元素的定位父级元素：
如果元素fixed定位，得到null;
元素没有fixed情况下如果元素所有的父级元素都没定位，得到body;
元素没有fixed情况下，父级元素有定位，得到离他最近的有定位的父级元素
scroll系列
scrollTop和scrollLeft:获得的是内容卷曲出去的高度和宽度，当滚动条向下拉时，内容往上走，获得的就是上面跑出盒子范围的那部分高度。滚动条向右拉同理
scrollWidth和scrollHeight:获得元素的实际宽度和高度，在内容没有超出盒子时，获得的是盒子的内部高度和宽度。内容超出盒子时获得的是内容实际应有的高度和宽度。当盒子内部存在滚动条时，获得的高度和宽度不包括滚动条。
根据浏览器兼容性，scroll系列需要写出兼容代码：例如scrollTop:
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
client系列
clientTop和clientLeft：获得上边框和左边框的宽度。
clientWidth和clientHeight:获取可视范围的宽度高度，即边框内部的，不包括border，包括padding.当盒子内部存在滚动条时，获得的高度和宽度不包括滚动条。
*
*
* */
</script>
<input type="button" value="隐藏" id="btn3">
<div id = "dv" style="width: 100px;height: 100px;border: 1px solid black; background-color: #4481ff;"> </div>
<span style = "display: inline-block;">观察</span>
<script>
/*
* 元素隐藏的不同方式：1.display:none; -显示方式 不占位置
* 2.visibility:hidden; --可见性 占位置
* 3.style.opacity:0； --透明度 占位置
* 4.style.height = 0; border = 0; --高度变成0,去除边框 占空位置（仍然存在一个高度为0的块级元素，导致后续行内元素会换行）
* 5.style.width = 0; border = 0;--宽度变0，去除边框 占空位置（仍然存在一个宽度为0的块级元素，导致后续行内元素会换行）
* 6.都变0 --占空位置（仍然存在一个大小为0的块级元素，导致后续行内元素换行）
*
*
* */
var btn3 = document.getElementById("btn3");
var dv = document.getElementById("dv");
btn3.addEventListener("click",function(){
// dv.style.display = "none";
// dv.style.visibility = "hidden";
// dv.style.height = 0;
// dv.style.border = 0;
// dv.style.width = 0;
// dv.style.border = 0;
dv.style.height = 0;
dv.style.width = 0;
dv.style.border = 0;
},false)
</script>
<div class="login-header"><a id="link" href="javascript:void(0);">点击，弹出登录框</a></div>
<div id="login" class="login">
<div id="title" class="login-title">登录会员
<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span></div>
<div class="login-input-content">
<div class="login-input">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
</div>
<div class="login-input">
<label>登录密码：</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
</div>
</div>
<div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div><!--登录框-->
<div id="bg" class="login-bg"></div><!--遮挡层-->
<!--可拖拽的窗体案例-->
<script>
//点击显示登录框和遮挡层
document.getElementById("link").onclick = function () {
document.getElementById("login").style.display = "block";
document.getElementById("bg").style.display = "block";
};
//点击关闭关闭登录框和遮挡层
document.getElementById("closeBtn").onclick = function () {
document.getElementById("login").style.display = "none";
document.getElementById("bg").style.display = "none";
};
/*
* 思路：实现拖拽移动：获取点击时鼠标距离框体边缘的距离x和y,
* x = 鼠标点击时的clientX - 框体的offsetLeft
* y = 鼠标点击时的clientY - 框体的offsetTop
* 在移动过程中x,y不变
* 在移动过程中鼠标的clientX和clientY变化，用这两个分别减去x和y即得到框体实时应该在的的Left和Top
* */
//鼠标点下去事件
var login = document.getElementById("login");
document.getElementById("title").onmousedown = function (e) {
var x = e.clientX - login.offsetLeft;
var y = e.clientY - login.offsetTop;
//移动是在界面内发生,
document.onmousemove = function (e) {
var left = e.clientX - x;
var top = e.clientY - y;
login.style.left = left +250+ "px";
login.style.top = top -140+ "px";
//由于登录框有margin存在：margin-left: -250px;margin-top: 140px;
//所以要另外抵消这个相对距离
};
};
//鼠标抬起事件：清理移动事件
document.getElementById("title").onmouseup = function () {
document.onmousemove = null;
};
</script>
</body>
</html>
浙公网安备 33010602011771号