前端基本功--网页特效3 11.17

一、client家族

1. client 可视区域
   offsetWidth: width + padding + border （披着羊皮的狼）
   clientWidth： width + padding 不包含border
   scrollWidth: 大小是内容的大小
   
   图片1.png

二、检测屏幕宽度(可视区域)

1. ie9及其以上的版本 window.innerWidth
   标准模式 document.documentElement.clientWidth
   怪异模式 document.body.clientWidth

• 封装函数

 function client() {
        if(window.innerWidth != null)  // ie9 + 最新浏览器
        {
            return {
                width: window.innerWidth,
                height: window.innerHeight
            }
        }
        else if(document.compatMode === "CSS1Compat")  // 标准浏览器
        {
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        }
        return {   // 怪异浏览器
            width: document.body.clientWidth,
            height: document.body.clientHeight

        }
    }

2. 检测屏幕分辨率
   clientWidth 返回的是 可视区大小 浏览器内部的大小、
   window.screen.width 返回的是我们电脑的 分辨率 跟浏览器没有关。

三、 window.onresize 事件（改变窗口大小）

onresize 事件会在窗口或框架被调整大小时发生，响应式常用。
function fun() { 语句 }
fun 是函数体的意思
fun() 调用函数 的意思

• 改变窗口大小时改变背景颜色：

    reSize();//先执行一遍，使窗口不改变时有初始效果
    window.onresize = reSize;//不能加括号，加括号相当于直接出执行结果
    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";
        }
    }

四、冒泡机制

1. 事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
2. 从里层到外层
   IE 6.0:
   div -> body -> html -> document
   其他浏览器:
   div -> body -> html -> document -> window
3. 以下事件不冒泡：blur、focus、load、unload
4. 阻止冒泡

1  if(event && event.stopPropagation)
2          {
3              event.stopPropagation();  //  w3c 标准
4          }
5          else
6          {
7              event.cancelBubble = true;  // ie 678  ie浏览器
8   }

5.判断当前对象
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 ;
          //判断是不是当前的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事件，鼠标弹起，弹出框，框的位置是clientX和clientY。

获取用户选中内容兼容性的写法：

if(window.getSelection)
{
    txt = window.getSelection().toString();   // 转换为字符串
}
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)
        }

• 动画原理

1. 让盒子的offsetLeft 每次都加上自己定义的步长！
   10+10 = 20 + 10
2. Math.abs(-5) 取绝对值函数

       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)
        }

• 轮播图

总结：轮播图写了三遍弄清了整体思路。
第一步：获取元素。
第二步：设置鼠标滑过的效果。
第三步：设置整体定时器。
第四部：解决两个定时器的矛盾问题。