client 家族

client 可视区域
offsetWidth: width + padding + border （披着羊皮的狼）
clientWidth： width + padding 不包含border
scrollWidth:大小是内容的大小,
注意：即使使用overflow:hidden，scrollWidth也不会变小

检测浏览器可视区域的大小

IE9及其以上的版本
window.innerWidth
标准模式（等于CSS1Compat）
document.documentElement.clientWidth
怪异模式
document.body.clientWidth

获取可视区域大小的函数封装

window.onresize改变窗口事件

昨天 window.onscroll = function() {} 屏幕滚动事件
今天 window.onresize = function() {} 窗口改变事件
onresize 事件会在窗口或框架被调整大小时发生

区分：

window.onscroll 屏幕滑动
window.onresize 浏览器大小变化
window.onload 页面加载完毕
div.onmousemove 鼠标在盒子上移动

例：根据屏幕大小改变页面颜色

window.screen.width检测屏幕宽度(分辨率)

返回的是我们电脑的屏幕的分辨率，跟浏览器没有关系
分辨率：是屏幕图像的精密度，指显示器所能显示的像素有多少。

冒泡机制（event）

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

事件传播的三个阶段

事件传播的三个阶段是：捕获、冒泡和目标阶段
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

冒泡顺序

IE 6.0:
div -> body -> html -> document
其他浏览器:
div -> body -> html -> document -> window
不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload、onmouseenter onmouseleave

阻止冒泡

标准浏览器和 IE浏览器
标准浏览器指的是：IE9+和其他浏览器
IE浏览器指的是：IE6、7、8
w3c的方法是event.stopPropagation() Propagation 传播传递
IE则是使用event.cancelBubble = true bubble 冒泡泡泡 cancel 取消

判断当前对象

火狐、谷歌、等： event.target
IE 6、7、8：event.srcElement
兼容性写法获取元素ID：

var event = event || window.event;
var targetId = event.target ? event.target.id : event.srcElement.id;

targetId == "show"来判断当前点击是否点中了id=show的元素

例：点击空白处，弹出框消失
　　这个案例就是说，一个盒子，点击除了自己之外的任何一个地方，就会隐藏。
原理：
　　点击自己不算 ( 怎么证明我是我点击的这个对象id 正好和自己一样 )
　　点击空白处就是点击 document

例：选中之后，弹出层
我们想，选中某些文字之后，会弹出一个弹出框，这个和我们前面讲过的拖拽有点不一样。
拖拽是拖着走。拉着鼠标走。选择文字：这个弹出的层选中的时候不出来，弹起鼠标的时候才出现。
所以这个的事件一定是 onmouseup . 盒子显示而且盒子的位置再鼠标的 clientX 和 clientY 一模一样




    
    
    
    


    
        演唱：张学友
        曲 :戚小恋　词 :姚若龙　编 :屠颖
        你瘦了憔悴的让我好心疼
        有时候爱情比时间还残忍
        有人变得盲目
        而奋不顾身
        忘了爱 爱两个同样　用心的人
        你醉了脆弱得藏不住泪痕
        我知道绝望比冬天还寒冷
        你恨自己是个
        怕孤独的人
        偏偏又爱上自由自私的灵魂
        你带着他唯一写过的情书
        想证明当初爱得并不糊涂
        他曾为了你的逃离颓废痛苦
        也为了破镜重圆抱着你哭
        哦 ~　可惜爱不是几滴眼泪几封情书
        哦 ~　这样的话或许有点残酷
        等待着别人给幸福的人
        往往过得都不怎麽幸福
        哦 ~　可惜爱不是忍着眼泪留着情书
        哦 ~　伤口清醒要比昏迷痛楚
        紧闭着双眼　又拖着错误
        真爱　来临时你又要怎麽　留得住

动画

动画的原理就是：

盒子本身的位置+步长
盒子offsetLeft+步长

btn.onclick = function()
{
    //最基本的运动
    setInterval('move(box)',30);
}

运动的数学公式: s=s+s'

最初级的匀速运动

function move(obj){
    obj.style.left=obj.offsetLeft+speed+'px';
}




    
    动画基本原理

例：动画函数的初步封装

例：匀速动画函数的封装完善

例：轮播图

要实现无缝轮播，需要把第一张图片拷贝插入到最后面，当轮播到最后一张（也就是第一张图片）时，需要将盒子.style.left = 0;不能使用动画
每隔一秒（一般是3秒，这里为了测试使用1秒）图片轮播一次
鼠标放在放在序列号上，图片切换到当前序列号指向的位置
鼠标放在图片上，停止轮播，鼠标移出图片，从原来位置继续轮播
当图片轮播到4，鼠标放在序列号1时，当前显示第一张图片，当鼠标移开时，从第一张往后轮播而不是从第四张




    
    轮播图
    
    


    
        
            
                ![](images/1.jpg)
                ![](images/2.jpg)
                ![](images/3.jpg)
                ![](images/4.jpg)
                ![](images/5.jpg)

12_JS的client家族、事件冒泡机制、动画原理、匀速动画的封装