1、右下角悬浮框(富媒体)：
右下角广告
在高级浏览器下可以直接用 <b>position：fixed 固定定位</b>
该实例主要解决IE6下的不兼容fixed的问题。
<b>知识点</b>
滚动高度/宽度：
html: document.documentElement
body: document.body
纵向:
获取滚动高度：
document.body.scrollTop
兼容：Chrome
FF/IE: 0
document.documentElement.scrollTop
兼容：FF/IE
Chrome: 0
兼容版：
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
横向：
滚动的宽度
兼容问题同上。
兼容版:
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
可视区高度：
可视区 - 就是你能看见的区域的大小
document.documentElement.clientHeight
可视区宽度：
document.documentElement.clientWidth
物体本身的高度、宽度：
物体 -> obj
obj.offsetHeight
obj.offsetWidth
取的是盒子模型的高度/宽度
盒子模型：width/height + padding + border + margin
盒子模型大小：width/height + padding + border
offsetHeight的返回值是number ， 大小是盒模型大小，当display:none 时获取的值为 0
<b>事件</b>
window.onscroll
当滚动滚动条的时候
window.onresize
当缩放浏览器的时候
代码
<style>
body {height:2000px;}
div {width:200px;height:200px;background:blue; position:fixed;_position:absolute;right:5px;bottom:10px;font-size:100px;text-align:center;line-height:200px;color:#fff;}
</style>
<script>
//ie 6 兼容写法
if (window.navigator.userAgent.toLowerCase().indexOf('msie 6.0') != -1) {
window.onload = window.onscroll = window.onresize = function () {
var oBox = document.getElementById('box');
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var clientHeight = document.documentElement.clientHeight;
var oHeight = oBox.offsetHeight;
oBox.style.top = (scrollTop + clientHeight -oHeight)+'px';
};
}
</script>
<body>
<div id="box">广告</div>
</body>
2、懒加载（）
物体距离左边/上边的距离：
父级：
a). parentNode -> 结构上的父级
b). offsetParent -> 定位父级
祖宗： body
物体 -> obj
左边：obj.offsetLeft
物体距离有定位父级的左边的一个距离
上边：obj.offsetTop
物体距离有定位父级的上边的一个距离
求物体距离上边/左边的绝对距离：
getPos(obj);
function getPos(obj) {
var l = 0;
var t = 0;
while(obj) {
l += obj.offsetLeft;
t += obj.offsetTop;
// 换定位父级
obj = obj.offsetParent;
}
return {left: l, top: t};
}
慢点加载
原因：节约资源，节约带宽，节省钱
查看是否加载
chrome -> network -> 加载痕迹
怎么让一个图片不加载 ？
不给src，在需要的时候给
写_src 约定俗成
定义属性：
a). . 点
b). [] 中括号
c). obj.getAttribute('自定义属性名字');
设置自定义属性：
obj.aaa = xxx;
obj.setAttribute('自定义属性名字','值是多少');
删除自定义属性
obj.removeAttribute('自定义属性名字');
*** 自定义属性的方法方式不能混合使用
代码
<style>
* {margin:0;padding:0;list-style:none;}
ul li {width:300px;height:300px;border:1px solid #000;margin:10px;float:left; }
ul li img {width:100%; }
</style>
<script>
function getPos(obj) {
var l = 0; //默认左边距离
var t = 0; //默认高度
//循环 获取l 和 t 的值
while (obj) {
l += obj.offsetLeft;
t += obj.offsetTop;
obj = obj.Offsetparent;
}
return {top: t, left: l};
}
window.onload = window.onscroll = window.onresize = function () {
var oBox = document.getElementById('box');
var aImg = oBox.getElementsByTagName('img');
//获取滚动高度
var scrollT = document.documentElement.scrollTop||document.body.scrollTop;
//获取可视区高度
var clientH =document.documentElement.clientHeight;
//循环改变符合条件img的src
for (var i = 0; i < aImg.length; i++) {
if (scrollT + clientH >= getPos(aImg[i]).top) {
aImg[i].src = aImg[i].getAttribute('_src');
}
}
};
</script>
<body>
<ul id="box">
<li><img _src="cat/1.jpg" alt="..."/></li>
<li><img _src="cat/2.jpg" alt="..."/></li>
<li><img _src="cat/3.jpg" alt="..."/></li>
<li><img _src="cat/4.jpg" alt="..."/></li>
<li><img _src="cat/5.jpg" alt="..."/></li>
<li><img _src="cat/6.jpg" alt="..."/></li>
<li><img _src="cat/7.jpg" alt="..."/></li>
<li><img _src="cat/8.jpg" alt="..."/></li>
<li><img _src="cat/9.jpg" alt="..."/></li>
<li><img _src="cat/10.jpg" alt="..."/></li>
<li><img _src="cat/11.jpg" alt="..."/></li>
<li><img _src="cat/12.jpg" alt="..."/></li>
</ul>
3、简单瀑布流（花瓣网）：
特点：
a). 宽度一致，高度是参差不齐
b). 滚不完
aUl -> 伪数组
没有数组的方法
物体的<b>内容</b>高度：
物体 -> obj
obj.scrollHeight
注意点：
如果内容的高度小于盒模型的高度，取盒模型的高度
如果内容的高度大于盒模型的高度，取内容的高度
效果：
简单瀑布流
代码：
<style>
div {width:1100px;margin: 0 auto; }
div ul{width:200px;margin:10px;border:1px solid #000;float:left;list-style:none;}
div ul li{width:180px;margin:10px;}
</style>
<script>
function rnd(n,m) {
return parseInt(Math.random()*(m-n)+n);
}
function createLi() {
var oLi = document.createElement('li');
oLi.style.height = rnd(200,400) +'px';
oLi.style.background = 'rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
return oLi;
}
window.onload = function () {
var oBox = document.getElementById('box');
var aUl = oBox.children;
function createLi20() {
for (var i = 0; i < 20; i++) {
var oLi = createLi();
var arr = [];
for (var k = 0; k <aUl.length; k++) {
arr.push(aUl[k]);
}
arr.sort(function (ul1, ul2) {
return ul1.offsetHeight - ul2.offsetHeight;
});
arr[0].appendChild(oLi);
}
}
createLi20();
window.onscroll = function () {
var scrollT = document.documentElement.scrollTop||document.body.scrollTop;
var clientH = document.documentElement.clientHeight;
var iH = document.body.scrollHeight;
if (scrollT + clientH >= iH) {
createLi20();
}
};
};
</script>
<body>
<div id = "box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
网友评论