JSAP107
1、目标
2、
需要考虑的问题:
案例：图片随着鼠标飞兼容性代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
}
img {
position: absolute;
}
</style>
</head>
<body>
<img src="data:images/bird.png" alt="" id="im"/>
<script src="common.js"></script>
<script>
var evt = {
//window.event与e的兼容问题
getEvent: function (evt) {
return window.event || evt;
},
//可视区域的横坐标
getClientX: function (evt) {
return this.getEvent(evt).clientX;
},
//可视区域的纵坐标
getClientY: function (evt) {
return this.getEvent(evt).clientY;
},
//左侧卷曲部分的距离
getScrollLeft: function () {
return window.pageXOffset || document.body.scrollLeft ||
document.documentElement.scrollLeft || 0;
},
getScrollTop: function () {
return window.pageYOffset || document.body.scrollTop ||
document.documentElement.scrollTop || 0;
},
getPageX: function (e) {
return this.getEvent(e).pageX ? this.getEvent(e).pageX :
this.getClientX() + this.getScrollLeft();
},
getPageY: function (e) {
return this.getEvent(e).pageX ? this.getEvent(e).pageY :
this.getClientY() + this.getScrollTop();
}
};
document.onmousemove = function (e) {
console.log(e);
my$("im").style.left = evt.getPageX(e) + "px";
my$("im").style.top = evt.getPageY(e) + "px";
};
</script>
</body>
</html>
//案例：拖拽对话框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></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>
<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 src="common.js"></script>
<script>
//获取超链接,注册点击事件,显示登录框和遮挡层
my$("link").onclick = function () {
my$("login").style.display = "block";
my$("bg").style.display = "block";
};
//获取关闭,注册点击事件,隐藏登录框和遮挡层
my$("closeBtn").onclick = function () {
my$("login").style.display = "none";
my$("bg").style.display = "none";
};
//按下鼠标,移动鼠标,移动登录框
my$("title").onmousedown = function (e) {
//获取此时的可视区域的横坐标-此时登录框距离左侧页面的横坐标
var spaceX = e.clientX - my$("login").offsetLeft;
var spaceY = e.clientY - my$("login").offsetTop;
//移动的事件
document.onmousemove = function (e) {
//新的可视区域的横坐标-spaceX====>新的值--->登录框的left属性
var x = e.clientX - spaceX+250;
var y = e.clientY - spaceY-140;
my$("login").style.left = x + "px";
my$("login").style.top = y + "px";
}
};
document.onmouseup=function () {
document.onmousemove=null;//当鼠标抬起的时候,把鼠标移动事件干掉
};
</script>
<script>
//点击超链接弹出登录框,点击页面的任何位置都可以关闭登录框
// my$("link").onclick=function (e) {
// my$("login").style.display="block";
// //return false;
// //e.preventDefault();
// //上面的两个是阻止默认事件的
// //下面的两个是阻止事件冒泡的
// //window.event.cancelBubble=true;
// e.stopPropagation();
// };
// document.onclick=function () {
// my$("login").style.display="none";
// console.log("隐藏了");
// };
</script>
</body>
</html>
e.preventDefault();阻止浏览器的默认事件，例如跳转,ie8不支持该方法，要用return false;
//案例：滚动条
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 500px;
border: 1px solid red;
margin: 100px;
position: relative;
overflow: hidden;
}
.content {
padding: 5px 18px 5px 5px;
position: absolute;
top: 0;
left: 0;
}
.scroll {
width: 18px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: #eee;
}
.bar {
height: 100px;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: red;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="content" id="content">
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头
床前明月光啊，明月光，疑是地上霜啊，举头嘿嘿
</div><!--文字内容-->
<div id="scroll" class="scroll"><!--装滚动条的层-->
<div class="bar" id="bar"></div><!--滚动条-->
</div>
</div>
<script src="common.js"></script>
<script>
//获取需要的元素
var box = my$("box");
var content = my$("content");
var scroll = my$("scroll");
var bar = my$("bar");
bar.style.height = scroll.offsetHeight * box.offsetHeight / content.offsetHeight + "px";
bar.onmousedown = function (e) {
var spaceY = e.clientY - bar.offsetTop;
document.onmousemove = function (e) {
var y = e.clientY - spaceY;
y = y < 0 ? 0 : y;
y = y > scroll.offsetHeight - bar.offsetHeight ? scroll.offsetHeight - bar.offsetHeight : y;
bar.style.top = y + "px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
var moveY = -y * (content.offsetHeight - box.offsetHeight) / (scroll.offsetHeight - bar.offsetHeight);
content.style.marginTop = moveY + "px";
};
};
document.onmouseup = function (e) {
document.onmousemove = null;
};
var moveY = y * (content.offsetHeight - box.offsetHeight) / (scroll.offsetHeight - bar.offsetHeight);
content.style.marginTop = moveY + "px";
//
</script>
</body>
</html>
设置鼠标按下时不选中文本
window.getSelection? window.getSelection().removeAllRanges():document.selection.empty();
元素隐藏的不同方式：
案例：表格隔行变色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 500px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
cursor: pointer;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: pink;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>课程</th>
<th>成绩</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
1
</td>
<td>柳岩</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>
2
</td>
<td>苍老师</td>
<td>日语</td>
<td>100</td>
</tr>
<tr>
<td>
3
</td>
<td>凤姐</td>
<td>营销学</td>
<td>100</td>
</tr>
<tr>
<td>
4
</td>
<td>芙蓉姐姐</td>
<td>数学</td>
<td>10</td>
</tr>
<tr>
<td>
5
</td>
<td>佐助</td>
<td>英语</td>
<td>100</td>
</tr>
<tr>
<td>
6
</td>
<td>卡卡西</td>
<td>体育</td>
<td>100</td>
</tr>
<tr>
<td>
7
</td>
<td>乔峰</td>
<td>体育</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
<script src="common.js"></script>
<script>
//先获取所有的行
var trs = my$("j_tb").getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
trs[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
//鼠标进入
trs[i].onmouseover = mouseoverHandle;
//鼠标离开
trs[i].onmouseout = mouseoutHandle;
}
//当鼠标进入的时候,先把设置后的颜色保存起来,等到鼠标离开再恢复即可
var lastColor = "";
function mouseoverHandle() {//鼠标进入
lastColor = this.style.backgroundColor;
this.style.backgroundColor = "green";
}
function mouseoutHandle() {//鼠标离开
this.style.backgroundColor = lastColor;
}
</script>
</body>
</html>
案例：tab切换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#list li {
list-style-type: none;
width: 80px;
height: 30px;
line-height: 30px;
background-color: beige;
text-align: center;
float: left;
margin-left: 5px;
}
#list li.current {
background-color: burlywood;
}
#list li a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<ul id="list">
<li class="current"><a href="http://www.baidu.com">首页</a>
</li>
<li><a href="javascript:void(0)">播客</a></li>
<li><a href="javascript:void(0)">博客</a></li>
<li><a href="javascript:void(0)">相册</a></li>
<li><a href="javascript:void(0)">关于</a></li>
<li><a href="javascript:void(0)">帮助</a></li>
</ul>
</div>
<script src="common.js"></script>
<script>
//获取所有的li标签,
var liObjs=my$("list").getElementsByTagName("li");
//循环遍历,找到每个li中的a,注册点击事件
for(var i=0;i<liObjs.length;i++){
//每个li中的a
var aObj=getFirstElement(liObjs[i]);
aObj.onclick=function () {
//第一件事:把这个a所在的li的所有的兄弟元素的类样式全部移除
for(var j=0;j<liObjs.length;j++){
liObjs[j].removeAttribute("class");
}
//第二件事:
//当前点击的a的父级元素li(点击的这个a所在的父级元素li),设置背景颜色
this.parentNode.className="current";
return false;//阻止超链接跳转
};
}
</script>
</body>
</html>
//案例：大量字符串拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="拼接吧" id="btn"/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<script src="common.js"></script>
<script>
// var str="abcef";
// console.log(str[2]);
// str[2]="H";
// console.log(str);
//字符串特性:不可变性
//点击按钮实现拼接
// document.getElementById("btn").onclick=function () {
// var str="";
// //获取所有的文本框
// var inputs=document.getElementsByTagName("input");
// //每个文本框的value属性值
// for(var i=0;i<inputs.length-1;i++){
// if(inputs[i].type!="button"){
// str+=inputs[i].value+"|";
// }
// }
// console.log(str+inputs[inputs.length-1].value);
// };
//推荐使用数组的方式拼接大量的字符串
document.getElementById("btn").onclick = function () {
var str = [];
//获取所有的文本框
var inputs = document.getElementsByTagName("input");
//每个文本框的value属性值
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type != "button") {
str.push(inputs[i].value);
}
}
console.log(str.join("|"));//字符串
};
</script>
</body>
</html>
推荐使用数组的方式拼接大量字符串
案例：评论
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<table id="tb" border="1">
<tbody id="tbd">
<tr>
<td>猪猪:</td>
<td>我喜欢吃肉</td>
</tr>
</tbody>
</table>
<div>
昵称:<input type="text" value="" id="userName"/><br/>
<textarea name="" id="tt" cols="30" rows="10"></textarea><br/>
<input type="button" value="评论一下" id="btn"/><br/>
</div>
<script src="common.js"></script>
<script>
//获取按钮,注册点击事件
document.getElementById("btn").onclick = function () {
//获取昵称的元素
var userName = my$("userName");
//获取评论的元素
var tt = my$("tt");
//创建行
var tr = document.createElement("tr");
//行加到tbody中
my$("tbd").appendChild(tr);
//创建列
var td1 = document.createElement("td");
tr.appendChild(td1);
td1.innerHTML = userName.value;
//创建列
var td2 = document.createElement("td");
tr.appendChild(td2);
td2.innerHTML = tt.value;
//清空
userName.value = "";
tt.value = "";
};