es6 封装语法

//示例一
class drag{
    constructor(){
        this.elems='';
    }
    toString(elems){
        elems.οnclick=function(e){
            let x,y;
            x=e.clientX- elems.offsetLeft
            y= e.clientX-elems.offsetTop
            console.log(x,y)
            console.log(e)
        }
    }
}

示例二

class shakeme{
    constructor(){
        this.elemes=''
    }
    toString(elemes){
       
            //兼容不同浏览器获取行间样式
            function getStyle(obj, attr) {
                return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
            }
                //第一步先追加多个div
                ww.οnclick=fns;
                function fns(obj){
                    console.log(obj)
                    getStyle(obj)
                }
                //添加点击事件
                elemes.onclick = fn;
                // oImg1.onclick = fn;
                //两个点击效果相同,那么就可以重用代码了
                function fn() {
                    var _this = this;
                    shake(_this, 'left', function () {//这里的回调函数实现的效果就是上下抖动
                        // shake(_this, 'top'); //注意:若没有任何声明的情况下,回调函数里不能直接用this,所以 _this=this不能少
                    })
                }
                //抖动效果的代码封装需要的参数也就是对象,方向,回调函数
                function shake(obj, attr, endFn) {
                    console.log("当前的obj是+"+obj)
                    //获取该元素的属性
                    var pos = parseFloat(getStyle(obj, attr));
                    var arr = [];
                    var num = 0;
                    var timer = null;
                    //抖动频率de数组,一正一负[20,-20,18,-18...]
                    for (var i = 20; i > 0; i -= 2) {
                        arr.push(i, -i) 
                    }
                    arr.push(0);
                    
                    //启用定时器前先关闭定时器
                    clearInterval(obj.timer);
                    obj.timer = setInterval(function () {
                        //让图片的left跟随数组里的值变化就会实现左右移动效果
                        obj.style[attr] = pos + arr[num] + "px";
                        num++;
                        if (num === arr.length) {
                            clearInterval(obj.timer);
                            endFn && endFn();
                        }
                    },30)
        
                }
        
    }
}


你可能感兴趣的:(es6 封装语法)