jd或者淘宝的具体商品有个放大镜的效果。虽然网上类似插件琳琅满目,应用到项目上有诸多不便,自己抽点时间自己写了个类似插件,积累下代码,何乐而不为呢!!let‘go:
打算把此特效封装成个插件,先把最基本的算法实现,然后再一步步封装吧:
最终实现效果:
html 代码:
css 代码:
* {
margin: 0;
padding: 0;
}
貌似什么都没有,开始咱们强大的js之旅吧:
javascript 代码:
mask.offsetWidth - mirror.offsetWidth) {
mirrorLeft = mask.offsetWidth - mirror.offsetWidth;
}
if (mirrorTop < 0) {
mirrorTop = 0;
}
else if (mirrorTop > mask.offsetHeight - mirror.offsetHeight) {
mirrorTop = mask.offsetHeight - mirror.offsetHeight;
}
mirror.style.top = mirrorTop + "px";
mirror.style.left = mirrorLeft + "px";
var paX = mirrorTop / (mask.offsetHeight - mirror.offsetHeight);
var paY = mirrorLeft / (mask.offsetWidth - mirror.offsetWidth);
$("bigImg").style.top = -paX * ($("bigImg").offsetHeight - $("big").offsetHeight) + "px";
$("bigImg").style.left = -paY * ($("bigImg").offsetWidth - $("big").offsetWidth) + "px";
}
}
function $(id) {
return document.getElementById(id);
}
function $Create(type) {
return document.createElement(type);
}
最后再 onload小小的调用一下:
效果总算出来了耶,
2. 接下来咱们封装吧:
Magnifer类代码:
this.offsetWidth - _this.mirror.offsetWidth) {
mirrorLeft = this.offsetWidth - mirror.offsetWidth;
}
if (mirrorTop < 0) {
mirrorTop = 0;
}
else if (mirrorTop > this.offsetHeight - _this.mirror.offsetHeight) {
mirrorTop = this.offsetHeight - _this.mirror.offsetHeight;
}
_this.mirror.style.top = mirrorTop + "px";
_this.mirror.style.left = mirrorLeft + "px";
var paX = mirrorTop / (this.offsetHeight - _this.mirror.offsetHeight);
var paY = mirrorLeft / (this.offsetWidth - _this.mirror.offsetWidth);
_this.bigImg.style.top = -paX * (_this.bigImg.offsetHeight - _this.bigDiv.offsetHeight) + "px";
_this.bigImg.style.left = -paY * (_this.bigImg.offsetWidth - _this.bigDiv.offsetWidth) + "px";
}
}
Magnifier.prototype.$ = function (id) {
return document.getElementById(id);
}
Magnifier.prototype.$Create = function (type) {
return document.createElement(type);
}
最后在onload调用下:
以上就是本文所述的全部内容了,希望大家能够喜欢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。