封装函数

var eventUtil = {
        //添加句柄
    addHandler : function(element, type, handler){
        if (element.addEventListener) {
            element.addEventListener(type, handler, false)
        } else if (element.attachEvent) {
            element.attachEvent('on'+type, handler);
        } else{
            element['on'+type] = handler;
        }
    },
    //删除句柄
    removeHandler : function(element, type, handler){
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false)
        } else if (element.detachEvent) {
            element.detachEvent('on'+type, handler);
        } else{
            element['on'+type] = null;
        }
    },
    //获取event
    getEvent : function(event){
        return event?event:window.event;
    },
    //获取事件类型
    getType : function(event){
        return event.type;
    }
    //获取事件目标
    getElement : function(){
        return event.target || event.srcElement;
    }
    //阻止默认行为
    preventDefault : function(event){
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    //阻止事件冒泡
    stopPropagation : function(event){
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
}
//获取class
function getByClass(clsName,parent){
    var oParent = parent?document.getElementById(parent):document,
        eles = [],
        elements = oParent.getElementsByTagName('*');

    for (var i = 0, l = elements.length; i < l; i++) {
        if (elements[i].className == clsName) {
            eles.push(elements[i]);
        }
    }
    return eles;
}
window.onload = drag;

拖拽

function Drag(id){
        var _this = this;
        this.disX = 0;
        this.disY = 0;

        this.oDiv = document.getElementById(id);
        this.oDiv.onmousedown = function (ev){
            _this.fnDown(ev);
            return false;
        }
    }
    Drag.prototype.fnDown = function(ev){
        var _this = this;
        var oEvent = ev||event;

        this.disX = oEvent.clientX - this.oDiv.offsetLeft;
        this.disY = oEvent.clientY - this.oDiv.offsetTop;

        document.onmousemove = function (ev){
            _this.fnMove(ev);
        };
        document.onmouseup = function (){
            _this.fnUp();
        };
    }

    Drag.prototype.fnMove = function(ev){
        var _this = this;
        var oEvent = ev||event;

        this.oDiv.style.left = oEvent.clientX - this.disX + 'px';
        this.oDiv.style.top = oEvent.clientY - this.disY + 'px';
    }

    Drag.prototype.fnUp = function(){
        document.onmousemove = null;
        document.onmouseup = null;
    }

拖拽时不跑出窗口

function LimitDrag(id){
    Drag.call(this, id);
}

for (var i in Drag.prototype) {
    LimitDrag.prototype[i] = Drag.prototype[i];
};

LimitDrag.prototype.fnMove = function (ev){
    var oEvent = ev||event;
    var l = oEvent.clientX - this.disX;
    var t = oEvent.clientY - this.disY

    if (l < 0) {
        l = 0;
    } else if (l > document.documentElement.clientWidth - this.oDiv.offsetWidth) {
        l = document.documentElement.clientWidth - this.oDiv.offsetWidth;
    }

    this.oDiv.style.left = l + 'px';
    this.oDiv.style.top = t + 'px';
}

运动

    function getStyle (obj, name){
        if (obj.currentStyle) {
            return obj.currentStyle[name];
        } else {
            return getComputedStyle(obj, false)[name];
        }
    }

    function startMove(obj, json, fnEnd){
        clearInterval(obj.timer);
        obj.timer = setInterval(function (){
            var bStop = true;
            for (var attr in json) {
                var cur = 0;

                if (attr == 'opacity') {
                    cur = Math.round(parseFloat(getStyle(obj,attr)*100));
                } else {
                    cur = parseInt(getStyle(obj,attr))
                }

                var speed = (json[attr] - cur)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);

                if (cur != json[attr]) {
                    bStop = false;
                }

                if (attr == 'opacity') {
                        obj.style.filter = 'alpha(opacity:'+(cur + speed)+')';
                        obj.style.opacity = (cur + speed)/100;
                    } else {
                        obj.style[attr] = cur + speed + 'px';
                    }
            if (bStop) {
                clearInterval(obj.timer);

                if (fnEnd) 
                fnEnd();
            };
            };

        }, 30);
    }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值