//示例一
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)
}
}
}