一、client家族
- client 可視區(qū)域
offsetWidth: width + padding + border （披著羊皮的狼）
clientWidth： width + padding 不包含border
scrollWidth: 大小是內(nèi)容的大小
圖片1.png
二、檢測屏幕寬度(可視區(qū)域)
- ie9及其以上的版本 window.innerWidth
標(biāo)準(zhǔn)模式 document.documentElement.clientWidth
怪異模式 document.body.clientWidth
- 封裝函數(shù)
function client() {
if(window.innerWidth != null) // ie9 + 最新瀏覽器
{
return {
width: window.innerWidth,
height: window.innerHeight
}
}
else if(document.compatMode === "CSS1Compat") // 標(biāo)準(zhǔn)瀏覽器
{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return { // 怪異瀏覽器
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
- 檢測屏幕分辨率
clientWidth 返回的是 可視區(qū)大小 瀏覽器內(nèi)部的大小、
window.screen.width 返回的是我們電腦的 分辨率 跟瀏覽器沒有關(guān)。
三、 window.onresize 事件（改變窗口大小）
onresize 事件會在窗口或框架被調(diào)整大小時發(fā)生，響應(yīng)式常用。
function fun() { 語句 }
fun 是函數(shù)體的意思
fun() 調(diào)用函數(shù) 的意思
- 改變窗口大小時改變背景顏色：
reSize();//先執(zhí)行一遍，使窗口不改變時有初始效果
window.onresize = reSize;//不能加括號，加括號相當(dāng)于直接出執(zhí)行結(jié)果
function reSize(){
var clientW = client().width;
1.
if(clientW > 960){
document.body.style.backgroundColor = "pink";
}
else if(clientW > 640){
document.body.style.backgroundColor = "red";
}
else {
document.body.style.backgroundColor = "yellow";
}
}
四、冒泡機(jī)制
- 事件冒泡: 當(dāng)一個元素上的事件被觸發(fā)的時候，比如說鼠標(biāo)點擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發(fā)。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。
-
從里層到外層
IE 6.0:
div -> body -> html -> document
其他瀏覽器:
div -> body -> html -> document -> window - 以下事件不冒泡：blur、focus、load、unload
- 阻止冒泡
1 if(event && event.stopPropagation)
2 {
3 event.stopPropagation(); // w3c 標(biāo)準(zhǔn)
4 }
5 else
6 {
7 event.cancelBubble = true; // ie 678 ie瀏覽器
8 }
5.判斷當(dāng)前對象
var targetId = event.target ? event.target.id : event.srcElement.id;
-
點擊隱藏
function $(id) {
return document.getElementById(id);
}
$("login").onclick = function(event){
$("mask").style.display = "block";
$("show").style.display = "block";
// 隱藏滾動條
document.body.style.overflow = "hidden";
var event = event || window.event ;
// 取消冒泡
if(event && event.stopPropagation){
event.stopPropagation();
}
else {
event.cancelBubble = true ;
}
}
document.onclick = function(event){
var event = event || window.event ;
//判斷是不是當(dāng)前的id
var targetId = event.target ? event.target.id : event.srcElement.id;
if(targetId!="show"){
$("mask").style.display = "none";
$("show").style.display = "none";
document.body.style.overflow = "visible";
}
}
-
獲取選中文字 彈出框
思路：onmosueup事件，鼠標(biāo)彈起，彈出框，框的位置是clientX和clientY。
獲取用戶選中內(nèi)容兼容性的寫法：
if(window.getSelection)
{
txt = window.getSelection().toString(); // 轉(zhuǎn)換為字符串
}
else
{
txt = document.selection.createRange().text; // ie 的寫法
}
綜合代碼：
$("text").onmouseup = function(event){
var event = event || window.event ;
var x = event.clientX;
var y = event.clientY;
var txt ;
//獲取選中文字
if(window.getSelection){
txt = window.getSelection().toString();
}
else {
txt = document.selectin.createRange().text;//ie
}
//判斷文字是否為空
if(txt){
show(x,y,txt);
}
}
// document.onclick = function(event){ //用onclick包括彈起和按下，防止冒泡
// var event = event || window.event ;
// var targetId = event.target ? event.target.id : event.srcElement.id;
// if(targetId!="demo"){
// $("demo").style.display = "none";
// }
// }
document.oncmousedown = function(event){ // 用onclick包括彈起和按下，防止冒泡
var event = event || window.event ;
var targetId = event.target ? event.target.id : event.srcElement.id;
if(targetId!="demo"){
$("demo").style.display = "none";
}
}
function show(xx,yy,txttxt){
setTimeout(function(){ //加定時器防止選擇很多 有bug
$("demo").style.display = "block";
$("demo").style.left = xx +"px";
$("demo").style.top = yy +"px";
$("demo").innerHTML = txttxt;
},400)
}
- 動畫原理
- 讓盒子的offsetLeft 每次都加上自己定義的步長！
10+10 = 20 + 10 - Math.abs(-5) 取絕對值函數(shù)
function $(id) {
return document.getElementById(id);
}
$("btn200").onclick = function(){
animate($("box"),200);
animate($("box1"),400);
}
$("btn400").onclick = function(){ //error
animate($("box"),400);
animate($("box1"),800);
}
var timer = null;
var index = 20;
var arr = [];//error
arr.index = 10;
function animate(obj,target){
var speed = target > obj.offsetLeft ? 5 : -5 ;//判斷盒子左移還是右移
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;// 要定義在定時器里，每次的值不一樣
if (Math.abs(result) <= 5) {
clearInterval(obj.timer);
obj.style.left = target +"px";//result的值有5px的誤差，使盒子移到該到的位置。
}
obj.style.left = obj.offsetLeft + speed + "px";
},30)
}
- 輪播圖
<script type="text/javascript">
function animate(obj,target){
clearInterval(obj.timer);
var speed = obj.offsetLeft<target ? 20 : -20 ;//判斷盒子左移還是右移
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;// 要定義在定時器里，每次的值不一樣
obj.style.left = obj.offsetLeft + speed + "px"; //不能放在最后，要在最后矯正誤差
if (Math.abs(result) <= 20)
{
clearInterval(obj.timer);
obj.style.left = target +"px";//result的值有5px的誤差，使盒子移到該到的位置。
}
},20)
}
window.onload = function () {
var all = document.getElementById("all");
var screen = document.getElementById("screen");
var ul = document.getElementById("ul");
var ullis = ul.children;
var www = ul.children[0];
//先克隆
ul.appendChild(ul.children[0].cloneNode(true));//克隆第一張圖片放在最后面
//創(chuàng)建小li
var ol = document.createElement("ol");
all.appendChild(ol);
for(var i = 0 ;i < ullis.length-1; i++){
var li = document.createElement("li");
li.innerHTML = i+1;
ol.appendChild(li);
}
ol.children[0].className = "current";
//開始動
var ollis = ol.children ;
for(i = 0 ; i < ollis.length ; i ++) {
ollis[i].index = i; //獲取索引值
ollis[i].onmouseover = function(){
for(var j = 0;j < ollis.length;j++){
ollis[j].className = ""; //清空所有類名
}
this.className = "current";
animate(ul,-this.index*500);
key = square = this.index;
}
}
//添加定時器
var timer = null; //不會沖突，這是輪播圖定時器
var key = 0;//存圖片的張數(shù)
var square = 0; //方塊
timer = setInterval(auto,1000);//開啟
function auto(){
key++;
if(key>ullis.length-1){
ul.style.left = 0;//出錯
key = 1;//第六張就是第一張，第六張之后就是第二張
}
animate(ul,-key*500);
// 方塊
square++;
if(square>ollis.length-1){
square = 0;
}
for (i = 0;i<ollis.length;i++){
ollis[i].className = "";
}
ollis[square].className = "current";
}
all.onmouseover = function(){
clearInterval(timer);
}
all.onmouseout = function(){
timer = setInterval(auto,1000);
}
}
</script>
總結(jié)：輪播圖寫了三遍弄清了整體思路。
第一步：獲取元素。
第二步：設(shè)置鼠標(biāo)滑過的效果。
第三步：設(shè)置整體定時器。
第四部：解決兩個定時器的矛盾問題。
