JavaScript -- webAPI 随记02--函数封装

最新推荐文章于 2023-06-25 11:15:46 发布

十一T_T

最新推荐文章于 2023-06-25 11:15:46 发布

阅读量244

点赞数

分类专栏： JavaScript 文章标签： JavaScript webAPI

本文链接：https://blog.csdn.net/XJ5210224/article/details/85041850

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

动画函数的封装：

//匀速动画
function animate(element, target) {
    //清理定时器
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        var current = element.offsetLeft;      //获取元素的当前位置
        var step = 10;       //移动的步数
        current += step;
        if (Math.abs(current - target) > Math.abs(step)) {
            element.style.left = current + "px";
        } else {
            clearInterval(element.timeId);
            element.style.left = target + "px";
        }
    }, 20);
}
document.getElementById("btn1").onclick = function () {
    animate(document.getElementById("dv"), 400);
};

//变速动画
function animate(element, target) {
//清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的当前位置
var current = element.offsetLeft;
//移动的步数
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style.left = current + "px";
if (current == target) {
//清理定时器
clearInterval(element.timeId);
}
//测试代码:
console.log("目标位置:" + target + ",当前位置:" + current + ",每次移动步数:" + step);
}, 20);
}

获取任意一个元素的任意一个样式属性的值
function getStyle(element,attr) {
    //判断浏览器是否支持这个方法
    return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
document.getElementById("btn").onclick=function () {
    console.log(getStyle(document.getElementById("dv"),"top"));
};

变速动画函数封装增加任意多个属性：

//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
function getStyle(element,attr) {
    return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
//element---元素；json---对象---多个属性及多个目标值；fn---函数
function animate(element,json) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
        var flag=true;//默认,假设,全部到达目标
        for(var attr in json){
            //获取元素这个属性的当前的值
            var current=parseInt(getStyle(element,attr));
            //当前的属性对应的目标值
            var target=json[attr];
            //移动的步数
            var step=(target-current)/10;
            step=step>0?Math.ceil(step):Math.floor(step);
            current+=step;//移动后的值
            element.style[attr]=current+"px";
            if(current!=target){
                flag=false;
            }
        }
        if(flag){
            //清理定时器
            clearInterval(element.timeId);
        }
        //测试代码
        console.log("目标:"+target+",当前:"+current+",每次的移动步数:"+step);
    },20);
}
document.getElementById("btn1").onclick=function () {
    animate(document.getElementById("dv"),{"width":400,"height":500,"left":500,"top":80});
};

变速动画函数封装增加任意多个属性和回调函数及层级：

function animate(element,json,fn) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
        var flag=true;//默认,假设,全部到达目标
        for(var attr in json){
            //获取元素这个属性的当前的值
            var current=parseInt(getStyle(element,attr));
            //当前的属性对应的目标值
            var target=json[attr];
            //移动的步数
            var step=(target-current)/10;
            step=step>0?Math.ceil(step):Math.floor(step);
            current+=step;//移动后的值
            element.style[attr]=current+"px";
            if(current!=target){
                flag=false;
            }
        }
        if(flag){
            //清理定时器
            clearInterval(element.timeId);
            //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
            if(fn){
                fn();
            }
        }
        //测试代码
        console.log("目标:"+target+",当前:"+current+",每次的移动步数:"+step);
    },20);
}
document.getElementById("btn1").onclick=function () {
    var json1={"width":400,"height":500,"left":500,"top":80};
    animate(document.getElementById("dv"),json1,function () {
        var json2={"width":40,"height":50,"left":50,"top":800};
        animate(document.getElementById("dv"),json2,function () {
            var json3={"width":450,"height":550,"left":550,"top":600};
            animate(document.getElementById("dv"),json3);
        });
    });
};

//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
    function getStyle(element, attr) {
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
    }
    function animate(element, json, fn) {
        clearInterval(element.timeId);//清理定时器
        //定时器,返回的是定时器的id
        element.timeId = setInterval(function () {
            var flag = true;//默认,假设,全部到达目标
            //遍历json对象中的每个属性还有属性对应的目标值
            for (var attr in json) {
                //判断这个属性attr中是不是opacity
                if (attr == "opacity") {
                    //获取元素的当前的透明度,当前的透明度放大100倍
                    var current = getStyle(element, attr) * 100;
                    //目标的透明度放大100倍
                    var target = json[attr] * 100;
                    var step = (target - current) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    current += step;//移动后的值
                    element.style[attr] = current / 100;
                } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
                    //层级改变就是直接改变这个属性的值
                    element.style[attr] = json[attr];
                } else {
                    //普通的属性
                    //获取元素这个属性的当前的值
                    var current = parseInt(getStyle(element, attr));
                    //当前的属性对应的目标值
                    var target = json[attr];
                    //移动的步数
                    var step = (target - current) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    current += step;//移动后的值
                    element.style[attr] = current + "px";
                }
                //是否到达目标
                if (current != target) {
                    flag = false;
                }
            }
            if (flag) {
                //清理定时器
                clearInterval(element.timeId);
                //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
                if (fn) {
                    fn();
                }
            }
            //测试代码
            console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
        }, 20);
    }
    //zIndex:1000
    //透明度: 数字类型----小数---放大100倍
    document.getElementById("btn1").onclick = function () {
        var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2};
        animate(document.getElementById("dv"), json1, function () {
            animate(document.getElementById("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000});
        });
    };

手风琴:

ul {list-style: none;}
    * {margin: 0;padding: 0;}
    div {width: 1150px;height: 400px;margin: 50px auto;border: 1px solid red;overflow: hidden;}
    div li {width: 240px;float: left;}
    div ul {width: 1300px;}
    <div id="box"> <ul>
        <li></li> <li></li> <li></li><li></li> <li></li>
    </ul> </div>
    //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
    function getStyle(element, attr) {
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
    }
    function animate(element, json, fn) {
        clearInterval(element.timeId);//清理定时器
        //定时器,返回的是定时器的id
        element.timeId = setInterval(function () {
            var flag = true;//默认,假设,全部到达目标
            //遍历json对象中的每个属性还有属性对应的目标值
            for (var attr in json) {
                //判断这个属性attr中是不是opacity
                if (attr == "opacity") {
                    //获取元素的当前的透明度,当前的透明度放大100倍
                    var current = getStyle(element, attr) * 100;
                    //目标的透明度放大100倍
                    var target = json[attr] * 100;
                    var step = (target - current) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    current += step;//移动后的值
                    element.style[attr] = current / 100;
                } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
                    //层级改变就是直接改变这个属性的值
                    element.style[attr] = json[attr];
                } else {
                    //普通的属性
                    //获取元素这个属性的当前的值
                    var current = parseInt(getStyle(element, attr));
                    //当前的属性对应的目标值
                    var target = json[attr];
                    //移动的步数
                    var step = (target - current) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    current += step;//移动后的值
                    element.style[attr] = current + "px";
                }
                //是否到达目标
                if (current != target) {
                    flag = false;
                }
            }
            if (flag) {
                //清理定时器
                clearInterval(element.timeId);
                //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
                if (fn) {
                    fn();
                }
            }
            //测试代码
            console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
        }, 20);
    }
    //先获取所有的li标签
    var list = document.getElementById("box").getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
        list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
        //鼠标进入
        list[i].onmouseover = mouseoverHandle;
        //鼠标离开
        list[i].onmouseout = mouseoutHandle;
    }
    //进入
    function mouseoverHandle() {
        for (var j = 0; j < list.length; j++) {
            animate(list[j], {"width": 100});//动画效果
        }
        animate(this, {"width": 800});
    }
    //离开
    function mouseoutHandle() {
        for (var j = 0; j < list.length; j++) {
            animate(list[j], {"width": 240});//动画效果
        }
    }

offset系列:(父级元素margin+父级元素padding+父级元素border+自己的margin)

获取元素的宽,高,left,top, offsetParent
* offsetWidth:元素的宽,(有边框)
* offsetHeight:元素的高,(有边框)
* offsetLeft:元素距离左边位置的值
* offsetTop:元素距离上面位置的值
* scroll系列:卷曲
* scrollLeft:向左卷曲出去的距离
* scrollTop:向上卷曲出去的距离
* scrollWidth:元素中内容的实际的宽(如果内容很少,没有内容,元素自身的宽),没有边框
* scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框
* client系列:可视区域
* clientWidth:可视区域的宽(没有边框),边框内部的宽度
* clientHeight:可视区域的高(没有边框),边框内部的高度
* clientLeft:左边边框的宽度
*clientTop :上面的边框的宽度
* clientX:可视区域的横坐标
* clientY:可视区域的纵坐标

文档的鼠标移动事件
对象   事件   事件处理函数,事件触发了,函数的代码就会执行,执行的时候,函数调用的时候
通过arguments.length，可以得出:事件处理函数中实际上是有一个参数的,这个参数和事件有关系,是一个对象----->事件参数对象
谷歌和火狐中都有这个事件参数对象,IE8中没有
因为IE8的浏览器中针对事件参数对象使用的是window.event,那么,事件处理函数中是没有e这个参数的,所以,使用window.event来代替e
事件参数对象:e----在IE8中用window.event来代替
 document.onmousemove=function (e) {
   console.log(arguments[0]);
   console.log(e);
 };
 document.onmousemove = function (e) {
   e = window.event || e;
   document.getElementById("im").style.left = e.clientX + "px";//可视区域的横坐标
     document.getElementById("im").style.top = e.clientY + "px";//可视区域的纵坐标
 };
document.onmousemove = function (e) {
相对于页面顶部的坐标
    document.getElementById("im").style.left = e.pageX + "px";
    document.getElementById("im").style.top = e.pageY + "px";
pageX和pageY在谷歌和火狐可以使用,IE8不能用
    document.getElementById("im").style.left = window.event.pageX + "px";
    document.getElementById("im").style.top = window.event.pageY + "px";

//页面的鼠标移动事件
document.οnmοusemοve=function (e) {
function getScroll() {
return {
left:window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0,
top:window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0
}
}
my$("im").style.left=window.event.clientX+getScroll().left+"px";//可视区域横坐+向左卷曲出去的横坐标
my$("im").style.top=window.event.clientY+getScroll().top+"px";//可视区域纵坐标+向上卷曲出去的纵坐标
};

图片跟着鼠标飞：

//把代码放在一个对象中
  var evt={
    //window.event和事件参数对象e的兼容
    getEvent:function (e) {
      return window.event||e;
    },
    //可视区域的横坐标的兼容代码
    getClientX:function (e) {
      return this.getEvent(e).clientX;
    },
    //可视区域的纵坐标的兼容代码
    getClientY:function (e) {
      return this.getEvent(e).clientY;
    },
    //页面向左卷曲出去的横坐标
    getScrollLeft:function () {
      return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
    },
    //页面向上卷曲出去的纵坐标
    getScrollTop:function () {
      return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
    },
    //相对于页面的横坐标(pageX或者是clientX+scrollLeft)
    getPageX:function (evt) {
      return this.getEvent(evt).pageX? this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();
    },
    //相对于页面的纵坐标(pageY或者是clientY+scrollTop)
    getPageY:function (evt) {
      return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();
    }
  };
  document.onmousemove=function (e) {
    my$("im").style.left=evt.getPageX(e)+"px";
    my$("im").style.top=evt.getPageY(e)+"px";
  };