1.預(yù)加載-圖片：
自己偷偷地加載
預(yù)加載的原理
var img = new Image()
img.src = '';
//頁面上放很多img情龄，設(shè)置成隱藏
img.onload=function(){
//加載完成了
};
img.onerror = funciton(){
//加載出錯(cuò)了
}
例子：
<style>
#div1{
width:800px;
height: 50px;
background: #ccc;
position: relative;
}
#div2{
width: 1px;
height: 100%;
background: red;
position: absolute;
left: 0;
top:0;
}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var count = 1;
for(var i = 0; i < 77; i++){
var img = new Image();
//img.src = 'images/'+i+'.jpg';
img.src = 'http://www.zhinengshe.com/works/3525/img/'+i+'.jpg';
img.onload = function(){
count++;
var scale = count / 77;
oDiv2.style.width = oDiv1.offsetWidth * scale + 'px';
};
if(count == 77){
//alert('加載完了迄汛！');
}
}};
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
2.延遲加載
延遲加載：
obj.offsetTop < 可視區(qū)高度 + 滾動(dòng)距離;
obj.offsetTop < document.documentElement.clientHeight +
(document.documentElement.scrollTop || document.body.scrollTop);
例子：
<style>
*{margin:0;padding:0;list-style:none;}
li{
width: 200px;
height: 200px;
border: 1px solid #000;
float: left;
margin:10px;
}
img{
width: 100%;
height:100%;
}
</style>
<script>
window.onresize = window.onscroll = window.onload = function(){
var aImg = document.getElementsByTagName('img');
for(var i = 0; i < aImg.length; i++){
//可視區(qū)高度
var clientHeight = document.documentElement.clientHeight;
//滾動(dòng)距離
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(aImg[i].offsetTop < (clientHeight+scrollTop)){
//加載aImg[i]
//console.log(aImg[i].getAttribute('_src'));
aImg[i].src = aImg[i].getAttribute('_src');
}
}
};
</script>
</head>
<body>
<ul>
<li><img _src="img/b1.jpg" alt=""></li>
<li><img _src="img/b2.jpg" alt=""></li>
<li><img _src="img/b3.jpg" alt=""></li>
<li><img _src="img/b4.jpg" alt=""></li>
<li><img _src="img/b5.jpg" alt=""></li>
<li><img _src="img/b6.jpg" alt=""></li>
<li><img _src="img/b7.jpg" alt=""></li>
<li><img _src="img/b8.jpg" alt=""></li>
<li><img _src="img/b9.jpg" alt=""></li>
<li><img _src="img/b10.jpg" alt=""></li>
</ul>
</body>
3.瀑布流
瀑布流：
物體大小：
高度：
obj.offsetHeight
obj.scrollHeight
當(dāng)內(nèi)容高度大于盒模型高度時(shí)-->內(nèi)容高度
當(dāng)內(nèi)容高度小于盒模型高度時(shí)-->盒模型高度
瀑布流求ul最短
var arr = [];
arr.push(1,3,9,2,100);
arr.push(div1,div2,div3..);
arr.push(小明,班長);
arr.sort(function(){
//默認(rèn)只會(huì)比字符串 字典序
//想比數(shù)字骤视，還是按字典序 n1,n2--> n1-n2
});
arr.sort(function(n1,n2){
return n1-n2;
});
arr.sort(function(人1鞍爱，人2){
return 人1.身高-人2.身高;
});
arrUl = [ul1,ul2,ul3];
arrUL.sort(function(ULa,ULb){
return ULa.offsetHeight - ULb.offsetHeight;
});
例子：
<style>
*{margin:0;padding:0;list-style:none;}
ul{
width: 200px;
border:1px solid #000;
float:left;
margin:10px;
}
li{
width: 180px;
height: 200px;
background: red;
margin:10px;
}
</style>
<script>
function rnd(n,m){return parseInt(Math.random()*(m-n)) + n;}
window.onload = function(){
var aUl = document.getElementsByTagName('ul');
function createLI(){
var oLi = document.createElement('li');
oLi.style.height = rnd(100,500) + 'px';
oLi.style.background = 'rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
return oLi;
}
function createLI20(){
for(var i = 0; i < 20; i++){
var oLi = createLI();
var arrUl = [];
for(var j = 0; j<aUl.length; j++){
arrUl.push(aUl[j]);
}
arrUl.sort(function(n1,n2){
return n1.offsetHeight - n2.offsetHeight;
});
arrUl[0].appendChild(oLi)
}
}
//如果走到最后了，再弄20個(gè)li专酗，加到頁面上
createLI20();
//當(dāng)整個(gè)頁面的高度 > 可視區(qū)+滾動(dòng)距離
//alert(document.documentElement.scrollHeight);
window.onscroll = function(){
//可視區(qū)高度
var clientH = document.documentElement.clientHeight;
//滾動(dòng)距離
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//可視區(qū)底邊
var clientBottom = clientH + scrollTop;
//頁面內(nèi)容高度
var pageHeight = document.documentElement.scrollHeight;
document.title = pageHeight + ',' + clientBottom;
if(pageHeight <= clientBottom){
alert(pageHeight + ',' + clientBottom);
createLI20();
}
};
};
</script>
</head>
<body>
<ul></ul>
<ul></ul>
<ul></ul>
</body>
4.拖拽
拖拽：
大象放冰箱：
1）打開冰箱門
2）把大象放進(jìn)去
3）把門關(guān)上
拖拽：
1）鼠標(biāo)按下
2）鼠標(biāo)移動(dòng)
3）鼠標(biāo)松開
新事件：
按下： onmousedown
移動(dòng)： onmousemove
松開： onmouseup
阻止默認(rèn)行為：
return false;
兼容：chrome ff ie9+
針對(duì)低級(jí)瀏覽器：
事件捕獲
obj.setCapture();
磁性吸附例子：
<style>
*{margin:0; padding:0;}
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
left:200px;
top:200px;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmousedown = function(ev){
var oEvent = ev || event;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var oEvent = ev || event;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
if(l <= 100){
l = 0;
}
if (l >= (document.documentElement.clientWidth - oDiv.offsetWidth-100)){
l = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if(t <= 100){
t = 0;
}
if(t >= (document.documentElement.clientHeight - oDiv.offsetHeight-100)){
t = document.documentElement.clientHeight - oDiv.offsetHeight;
}
oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
oDiv.releaseCapture && oDiv.releaseCapture();
};
oDiv.setCapture && oDiv.setCapture();
return false;
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
虛線框拖拽
<style>
*{margin:0; padding:0;}
#div1{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var border = 3;
oDiv.onmousedown = function(ev){
var oEvent = ev || event;
//創(chuàng)建一個(gè)虛線框 div 有邊框
var newDiv = document.createElement('div');
newDiv.style.width = oDiv.offsetWidth - border*2 + 'px';
newDiv.style.height = oDiv.offsetHeight - border*2 + 'px';
newDiv.style.position = 'absolute';
newDiv.style.left = oDiv.offsetLeft + 'px';
newDiv.style.top = oDiv.offsetTop + 'px';
newDiv.style.border = border + 'px dashed red';
document.body.appendChild(newDiv);
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var oEvent = ev || event;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
if(l <= 0){
l = 0;
}
if (l >= (document.documentElement.clientWidth - oDiv.offsetWidth)){
l = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if(t <= 0){
t = 0;
}
if(t >= (document.documentElement.clientHeight - oDiv.offsetHeight)){
t = document.documentElement.clientHeight - oDiv.offsetHeight;
}
newDiv.style.left = l + 'px';
newDiv.style.top = t + 'px';
};
document.onmouseup = function(){
oDiv.style.left = newDiv.offsetLeft + 'px';
oDiv.style.top = newDiv.offsetTop + 'px';
document.body.removeChild(newDiv);
document.onmousemove = null;
document.onmouseup = null;
oDiv.releaseCapture && oDiv.releaseCapture();
};
oDiv.setCapture && oDiv.setCapture();
return false;
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
