一,水平滚动条和垂直滚动条
1.1技术点
1)求滚动条的长度 2)拖动滚动条,求内容要走多少
~滚动条的长度取决于滚动内容(滚动内容越长,滚动条越短);
~内容滚动的距离和滚动条移动的距离成倍数关系.
1.2 换算公式
求滚动条的长度:
滚动条的长度/盒子的长度=盒子的长度/内容的长度
滚动条的长度=(盒子的长度/内容的长度)*盒子的长度(这里的"长度"是指高度或宽度)
拖动滚动条时,求内容移动的距离:
内容移动的距离/滚动条移动距离=(内容的长度-盒子的长度)/(盒子长度-滚动条长度)
内容移动距离=(内容的长度-盒子的长度)/(盒子长度-滚动条的长度)*滚动条移动的距离
二.内置对象Document
Document对象是window 对象的一部分,可通过 window.document 属性对其进行访问
Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问:
1.document.head(获取头部)
2.document.body(获取body)
3.document.title(获取标题)
4.document.documentElement(获取整个html)
5. document.compatMode :
BackCompat:标准兼容模式关闭
CSS1Compat:标准兼容模式开启
BackCompatible 对应quirks mode(怪异模式),CSS1Compat 对应strict mode(严格模式)
[早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式)，但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式) 。]
6.document.body.clientWidth(浏览器宽度)
三.scroll家族
1.基本概念
网页正文全文宽:document.body.scrollWidth;
网页正文全文高:document.body.scrollHeight;
网页被卷去的高:document.body.scrollTop;
网页被卷去的左边宽度:document.body.scrollLeft;
2.处理scroll家族浏览器适配问题
ie9+和最新浏览器:
window.pageXOffset;(scrollLeft)
window.pageYOffset;(scrollTop)
Firefox浏览器和其他浏览器:
document.documentElement.scrollTop;
Chrome浏览器和没有声明DTD<DOCTYPE>:
document.body.scrollTop;
兼容写法:
var scrollTop= window. pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var scrollLeft=window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
四.JSON
JSON(javaScript Object Notation)是一种轻量级的数据交换格式.它基于ECMAScript的一个子集.相比于XML,json更易于阅读和编写,同时也易于机器解析和生成,目前数据传递基本上都是用json.
JSON有两种结构:对象和数组,两种结构相互组合从而形成各种复杂的数据结构.
json特点:
数据在键值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
五.瀑布流
1.布局界面
fallwater();
functionfallwater() {
for(var i=0;i<listi[i].length;i++){
}
}
2.判断需要加载的临界点
functionisload() {
varisload=a<=b;
returnisload;
}
3.滚动加载:
window.onload= function() {
window.onscroll= function() {
if(isload()) {
for循环{添加图片}
fallwater();//对新添加页面进行布局
}
}
}
2017.9.27
