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


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值