(function () {
"use strict";
var EX = function (f1, f2) {
/**упрощение работы с get и set.
возвращает {get:function(){return f1;},set:f2},
если f2=true, то set:f1, если f2 нет, то set:undefined
**/
return {
get: function () {
return f1;
},
set: f2 === true ? f1 : f2 || undefined
};
};
EX.auto = function (f1, f2) {
/**тоже упрощает работу с get и set.
возвращает:
если f2=setget, EX(f1,true)
если f2=set, {set:f1}
если f2=get, {get:function(){return f1;}}
если f2=что-то-другое, {get:f1}
**/
switch (f2) {
case "setget":
return EX(f1, !!1);
case "set":
return {
set: fl
};
case "get":
return {
get: function () {
return f1;
}
};
default:
return {
get: f1
}
}
};
Object.defineProperties(Object.prototype, {
Ainit: {
/**конструктор объектов.
принимает объект и помещает его свойства в тот, на котором вызван Init.
если объект содержит конструкции типа l:{set:...,get:...}(только как прямые потомки), то они будут использованы как get l или set l (isEnumerable,isConfigurable,isWritable).
если свойство __isParam__ установлено в false l:{__isParam__:false}, то все свойства будут приниматься НЕ как параметры свойствa l (enumerable,configurable,writable,get,set)
также get и set можно создать, используя имя самой функции l:function get(){}-
get - создаст get с обёрткой
l:{
get:function (){
return get(){};
}
} - функция не будет выполняться сама
set - создаст set
setget - создаст set и get для одной функции
auto- создаст get без обёртки функции(она выполнится сама при вызове get)
**/
enumerable: false,
configurable: false,
writable: true,
value: function (vl) {
var tmp = {};
for (var nm in vl) {
var s = vl[nm] || {},
isp = s.__isParam__,
sn = s.name || "";
delete s.__isParam__;
tmp[nm] = (s.set === undefined && s.get === undefined && s.enumerable === undefined && s.configurable === undefined && s.writable === undefined && ["get", "auto", "setget", "set"].indexOf(sn) === -1 && isp !== true) || isp === false ? {
enumerable: false,
configurable: true,
writable: true,
value: vl[nm]
}
: (s.constructor !== Function ? s : EX.auto(s, sn));
}
Object.defineProperties(this, tmp);
}
}
});
var cp, //cursor position
whp = {}, //width, height, position, css position, this
dsp,
gtc, //styles
rect,
win,
sensor = !!("ontouchmove" in document), //проверка на сенсор
newElem = function (attrs, statics) { //используется вместо class для создания элементов
function felement() {
return Reflect.construct(HTMLElement, [], felement);
}
Object.setPrototypeOf(felement.prototype, HTMLElement.prototype);
Object.setPrototypeOf(felement, HTMLElement);
felement.prototype.Ainit(attrs);
felement.Ainit(statics);
return felement;
},
offset = {},
getProps = function (th) {
offset = th.getBoundingClientRect();
gtc = getComputedStyle(th);
return {
w: parseFloat(gtc.width),
h: parseFloat(gtc.height),
p: {top:offset.top,left:offset.left},
f: gtc.position === "fixed",
e: th
};
};
window.elems = []; //все элементы подсветки
!sensor && document.addEventListener("mousemove", function (e) {
cp = {
t: event.clientY,
l: event.clientX
};
elems.forEach(function (th) {
whp = getProps(th[0]);
whp.b = getProps(th[1]);
dsp = {
l: whp.e.getAttribute("b-left-despos"),
t: whp.e.getAttribute("b-top-despos")
};
dsp.t ? (
dsp.t = Function("it,cursor", "return " + dsp.t)(whp, cp)) : (
dsp.t = cp.t - whp.b.h / 2 - whp.p.top //выравнивание центра элемента
);
dsp.l ? (
dsp.l = Function("it,cursor", "return " + dsp.l)(whp, cp)) : (
dsp.l = cp.l - whp.b.w / 2 - whp.p.left);
whp.b.e.style.left = dsp.l + "px";
whp.b.e.style.top = dsp.t + "px";
});
});
customElements.define("f-dplane", newElem({
connectedCallback: function () {
if (sensor) {
this.setAttribute("sensor", "");
return;
}
var back = document.createElement("div");
back.setAttribute("b", "");
back.style.top = "200%";
back.style.left = "200%";
this.appendChild(back);
elems.push([this, back]);
},
disconnectedCallback: function () {
var elem,
th = this;
elems.forEach(function (el, ind) {
if (el[0] === th) {
elem = ind;
}
});
elems.splice(elem, 1);
}
}));
})();
我们不是在寻找简单的方法！
最简单的就是画个png-shku，用鼠标悬停在按钮上时的样子替换
感谢大家的回复！
以基里尔·科鲁什金为榜样，他做了以下事情：
（不使用类）
如果使用一个类，js代码量几乎可以减少2倍：