1.昨天复习
- onmousedown:鼠标点下
- onmouseup:鼠标抬起
2.Json
- JavaScript Object Notation JS对象表示法
- 它不是一门语言,只是JS语言的一个应用,前后台数据交互使用。
- 对象表示法:k:v (key,value),键值对
- 对象形式:{};
- var jsonPerson={name:“janes”,age:23,height:198,address:“30TH”};
- jsonPerson.name拿到json对象的name
- ES6–>ES2015–>ECNAScript2015
- ES7–>ES2016
- ES8
- 模板字符串:ES6中新内容 MDN文档
- 需要使用变量的地方使用 ${…} 包裹就好了
console.log(`
他的名字叫:${jsonPerson.name}
`)
- 获取title、head等文档内容
- document.title 标题
- document.head 头部
- document.body 身体
- document.documentElement HTML
- 数组表示法
3.scroll
- window对象的screenTop、screenLeft属性
- scrollTop、scrollLeft
- window.onscroll事件,滚动条滚动时
- document.documentElement.scrollTop 要注意兼容问题,Safari和没有文档声明的IE6、7、8中要使用特殊写法。
- 兼容写法:var scrolltop=document.documentElement.scrollTop||document.body.scrollTop||window.pageYOffset||0;
- 使用json写scroll封装:
JavaScript Scroll家族以及封装
function scroll(){
if(document.documentElement){
return {
top: document.documentElement.scrollTop,
left: document.documentElement.scrollLeft
}
}else if(document.body){
return {
top: document.body.scrollTop,
left: document.body.scrollLeft
}
}else if(window.pageXOffset){
return {
top: window.pageYOffset,
left: window.pageXOffset
}
}
}
课外了解知识:
- 浏览器怪异模式
- 怪异盒模型
- 标准盒模型
4.导航栏吸顶效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.head{
width:100%;
height:200px;
background-color: yellow;
}
.nav{
width: 100%;
height:80px;
background-color:black;
}
.fixed{
position: fixed;
left:0;
top:0;
}
.content{
width:100%;
height:10000px;
background-color:#ccc;
}
</style>
</head>
<body>
<div class="head"></div>
<nav class="nav"></nav>
<div class="content"></div>
</body>
<script src="js/scroll.js"></script>
<script type="text/javascript">
var headH=document.getElementsByClassName("head")[0].offsetHeight;
var nav=document.getElementsByTagName("nav")[0];
window.function(){
if(scroll().top>=headH){
nav.className="nav fixed";
}else{
nav.className="nav";
}
}
</script>
</html>
5.图片跟随
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
width:100%;
height:10000px;
}
img{
display: block;
position: absolute;
left: 0;
top:300px
}
</style>
</head>
<body>
<img src="img/QQ图片20190409143138.gif"/>
</body>
<script src="js/scroll.js"></script>
<script type="text/javascript">
var img=document.querySelector("img");
var leader=0,target=0,timer=null;
window.function(){
target=scroll().top+300;
timer=setInterval(function(){
leader=leader+(target-leader)/10;
img.style.top=leader+"px";
},20);
}
</script>
</html>
6.回到顶部效果
- window.scrollTo(x,y); 让水平和垂直滚动条去到啥位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
height:10000px;
}
div{
width:500px;
height:5000px;
background-color: red;
}
span{
display: inline-block;
width:80px;
height:80px;
border-radius: 8px;
background-color: yellow;
font-size:20px;
line-height: 80px;
text-align: center;
position: fixed;
right:20px;
bottom:20px;
display: none;
}
span:hover{
background-color:black;
color:white;
}
</style>
</head>
<body>
<div></div>
<span id="span">
TOP
</span>
</body>
<script src="js/scroll.js"></script>
<script type="text/javascript">
var span=document.getElementById("span");
var leader=0,target=0,timer=null;
window.function(){
if(scroll().top>0){
span.style.display="block";
}else{
span.style.display="none";
}
leader=scroll().top;
span.function(){
timer=setInterval(function(){
leader=leader+(target-leader)/20;
if(leader<300){
leader-=10;
}
console.log(leader)
window.scrollTo(0,leader);
if(leader<=0){
leader=0;
clearInterval(timer);
}
},30);
}
}
</script>
</html>
7.盒子尺寸获取方法
- client:可视区
- offsetHeight:包含内height、padding、border
- clientHeight:包含height、padding,没有border
- scrollHeight:元素的内容的高度,内容没有超过盒子就和clientHeight一样
8.屏幕尺寸
- IE9+:通过window.innerWidth
- 标准浏览器:通过document.documentElement.clientWidth
- 非标准浏览器:通过document.body.clientWidth
- 兼容处理:
function client(){
if(window.innerWidth !=null){
return {
height:window.innerHeight,
width:window.innerWidth
}
}else if(document.compatMode=="CSS1Compat"){
return {
height:document.documentElement.clientHeight,
width:document.documentElement.clientWidth
}
}else{
return {
height:document.body.clientHeight,
width:document.body.clientWidth
}
}
}
9.新窗口事件
- window.onresize:窗口尺寸发生改变时
- 声明函数之后,函数名代表整个函数,函数名()代表函数调用。
案例:当窗口宽度大于960px时,页面背景为黄色;大于640px时背景蓝色;其余为黑色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script src="js/scroll.js"></script>
<script type="text/javascript">
fun();
window.fun;
function fun(){
if(client().width>960){
document.body.style.backgroundColor="yellow";
}else if(client().width>640){
document.body.style.backgroundColor="blue";
}else{
document.body.style.backgroundColor="black";
}
}
</script>
</html>