JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装

知识点：

　　模拟滚动条的解除事件问题 ；

　　event内置对象，包含 了大量事件；

　　page兼容性：

　　　　pageX || clientX + scool（）.top  ；

　　if (true === a）true 最好写前边；

　　window.screen.width/height ： 检测屏幕分辨率；

　　屏幕宽高：

　　　　window.screen.width。     window.screen.height ；

　　可视区域宽高兼容性写法：

　　　　

        function  client(){
　　　　　　　if (window.innerHeight !== undefined) {
　　　　　　　　　return{
　　　　　　　　　　　　'width':window.innerWidth,
　　　　　　　　　　　　'height':window.innerHeight
　　　　　　　　　}　　　　　　
　　　　　　　　else if(window.compatMode ==="CSS1Compt"){
　　　　　　　　　return{
　　　　　　　　　　　　'width':document.documentElement.clientWidth,
　　　　　　　　　　　　'height':document.documentElementclientHeight 
　　　　　　　　　}
　　　　　　　　else {
　　　　　　　　　　return{
　　　　　　　　　　　　'width':window.body.clientWidth,
　　　　　　　　　　　　'height':window.body.clientHeight
　　　　　　　　　　 }

　　　　　　　　}　　　　
　　　　　}

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script src="jquery1.0.0.1.js"></script>
    <script>
        //需求：浏览器每次更改大小，判断是否符合某一标准然后给背景上色。
        //  // >960红色，大于640小于960蓝色，小于640绿色。
        //步骤：
        //1.老三步
        //2.判断。
        //3.上色

        //1.老三步
        window.onresize = fn;
        //页面加载的时候直接执行一次函数，确定浏览器可视区域的宽，给背景上色
        fn();

        //封装成函数，然后指定的时候去调用和绑定函数名
        function fn() {
            //2.判断。
            //3.上色
            if(client().width>960){
                document.body.style.backgroundColor = "red";
            }else if(client().width>640){
                document.body.style.backgroundColor = "blue";
            }else{
                document.body.style.backgroundColor = "green";
            }
        }
    
     //获取屏幕可视区域的宽高
    function client(){
        if(window.innerHeight !== undefined){
            return {
                "width": window.innerWidth,
                "height": window.innerHeight
            }
        }else if(document.compatMode === "CSS1Compat"){
            return {
                "width": document.documentElement.clientWidth,
                "height": document.documentElement.clientHeight
            }
        }else{
            return {
                "width": document.body.clientWidth,
                "height": document.body.clientHeight
            }
        }
    }


    </script>
</body>
</html>
根据屏幕可视宽度上色

 

client对象：

　　clientWidth / Height:网页可视区域的宽高：

　　　　不包括margin和border

　　　　padding+widhth

　　　　clientTop ／Left：获取border-top／left的宽度

　　盒子调用指盒子本身

　　body／html调用，可视区域大小

 　　

　　浏览器大小变化事件，window.onresize

三大家族的区别：

　　width/height

　　　　clientWidth = Width+padding 

　　　　offsetWidth = width +padding +border

　　　　scrollWidth 内容高度（不含border）

　　Top／Left

　　　　offsetTop／Left  ：距离父系盒子中带有定位的距离

　　　　scrollTop／Left   ：浏览器被卷去的部分

　　　　clientTop／Left。：盒子的上／左 border宽度

　　X/Y

　　　　scrollX／Y 

　　　　clientX／Y

　　　　　　鼠标距离可视区域的距离

 

 冒泡：

　　　　当上一个元素上的事件被触发后，同样的事件 在所有的父系元素上都被触发；

　　　　捕获冒泡目标阶段：

　　　　　　捕获：从上往下顺序（DOM树结构）执行事件；

　　　　　　冒泡：从下往上（DOm树结构）顺序执行事件；

　　　　不会冒泡的事件：blur\focus\load\unload\onmoissenter\onmouseleave ;

　　　　event.bubbles事件是否冒泡；

　　　　取消冒泡：
　　　　　　IE9+／火狐／谷歌 ：event.stopPropagetion ;

　　　　　　IE678 :cancel.bubbles 

　　　　　

　　　　 　if (event && event.stopPropagetion){
　　　　　　　　event.stopPropagetion();
　　　　　　}else {
　　　　　　　　event.cancelBubble
　　　　　　　}

事件委托：

　　　　普通的事件绑定无法为新创建的元素绑定时间

捕获addEventListener

 

function fn (阐述1，参数2，参数3）{

　　if (参数3） {

　　　　fn(参数1，参数3）；

　　}

}

 获取内嵌式和外链式的属性：

function getStyle(ele,attr) {
    if (window.getComputedStyle){
        return window.getComputedStyle( ele,null )[ attracted ];    
    } 
    return ele.currentStyle[attr];
}

缓动动画封装：

 

        function animate(ele,json,fn){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //开闭原则
                var bool = true;


                //遍历属性和值，分别单独处理json
                //attr == k(键)    target == json[k](值)
                for(var k in json){
                    //四部
                    var leader = parseInt(getStyle(ele,k)) || 0;
                    //1.获取步长
                    var step = (json[k] - leader)/10;
                    //2.二次加工步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    //3.赋值
                    ele.style[k] = leader + "px";
                    //4.清除定时器
                    //判断: 目标值和当前值的差大于步长，就不能跳出循环
                    //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
                    if(json[k] !== leader){
                        bool = false;
                    }
                }

                console.log(1);
                //只有所有的属性都到了指定位置，bool值才不会变成false；
                if(bool){
                    clearInterval(ele.timer);
                    //所有程序执行完毕了，现在可以执行回调函数了
                    //只有传递了回调函数，才能执行
                    if(fn){
                        fn();
                    }
                }
            },25);
        }




        //兼容方法获取元素样式
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }

 

　　　　　　

　　　　

　　　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

　　

posted @ 2017-04-19 22:58  明明明明明明明明  阅读(751)  评论(0)  编辑  收藏  举报