继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

对于javaScript的一些封装,希望能对大家有帮助

简小白
关注TA
已关注
手记 4
粉丝 9
获赞 182

//运动透明封装
function move(obj,json,fn){ // 属性值可以不加px 透明度是用0-1之间的数值
clearInterval(obj.timer) //清除正在执行的定时器

var iSpeed  = 0;

obj.timer = setInterval(function(){
    var bOver = true; //假设运动完成
    for (var attr in json){  //每个属性的遍历修改
        var iCur = 0;
        var iTarget;     //   因为我们传入的透明度参数是0-1之间,而我们的初始值是乘100的,所以目标值应该也相应的乘100
        if(attr == "opacity"){  //透明度
            iCur = parseFloat(getStyle(obj,"opacity"))*100;
            iTarget = parseInt(json[attr]*100);
        }else{
            iCur = parseInt(getStyle(obj,attr));
            iTarget = parseInt(json[attr]);
        }

        iSpeed = (iTarget - iCur)/5;//获取相对速度
        iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);//上下取整

        if(iCur != iTarget){
            bOver = false; //如果某一个属性没有完成运动
            if(attr == "opacity"){
                obj.style.filter ='alpha(opacity:'+(iCur + iSpeed)+')';
                obj.style.opacity =(iCur + iSpeed)/100;
            }else{
                obj.style[attr] =iCur + iSpeed +"px";
            }
        }
    }
    if(bOver){//运动完成
        clearInterval(obj.timer);
        if(fn){
            fn();  //如果有回调函数,执行回调函数
        }
    }
},30)

}
//拖拽的封装
function dragEle(obj,obj2){
var flag = 0;
var _left,_top;
// 鼠标按下
obj.onmousedown = function(e){
var evt = eevent;
flag = 1;
_left = evt.offsetXlayerX;
_top = evt.offsetYlayerY;
}
// 鼠标松开
document.onmouseup = function(){
flag = 0;
}
// 鼠标移动
document.onmousemove = function(e){
var evt = eevent;
if(flag){
obj2.style.left = evt.clientX-_left+"px";
obj2.style.top = evt.clientY-_top+"px";
}
}
}
//获取ajax封装
function ajax(url,bb){
//创建
var xhr = new XMLHttpRequest();
//建立连接
xhr.open('get',url,true);
//发送
xhr.send();
//返回数据

xhr.onreadystatechange = function(){
    if(xhr.readyState==4&xhr.status==200){
        var res = xhr.responseText;
        bb(res);
    }
}

}
//获取style样式封装
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
else{
return window.getComputedStyle(obj,null)[attr];
}
}
//兼容版获取Class封装
function getClass(classname,obj){
var arr = [];
if(document.getElementsByClassName){
return document.getElementsByClassName("classname");
}else{
var all = document.getElementsByTagName("*");
for(var i=0;i<all.length;i++){
var myClass = all[i].className.split(/\s+/);
for(var j=0;j<myClass.length;j++){
if(myClass[j]==classname){
arr.push(all[i]);
}
}
}
return arr;
}
}

打开App,阅读手记
10人推荐
发表评论
随时随地看视频慕课网APP