使用纯javascript实现放大镜效果
jd或者淘宝的具体商品有个放大镜的效果。虽然网上类似插件琳琅满目，应用到项目上有诸多不便，自己抽点时间自己写了个类似插件，积累下代码，何乐而不为呢!!let‘go:
打算把此特效封装成个插件，先把最基本的算法实现，然后再一步步封装吧：
最终实现效果：
html 代码：
复制代码 代码如下:
<div id=\"Magnifier\"></div>
css 代码：
复制代码 代码如下:
<style>
* {
margin: 0;
padding: 0;
}
</style>
貌似什么都没有，开始咱们强大的js之旅吧：
javascript 代码：
复制代码 代码如下:
function createElement(MagnifierId, sImg, bImg) {
var Magnifier = $(MagnifierId);
Magnifier.style.position = \'relative\';
//小图div
var smallDiv = $Create(\"div\");
smallDiv.setAttribute(\"id\", \"small\");
smallDiv.style.position = \"absolute\";
//遮罩层
var mask = $Create(\"div\");
mask.setAttribute(\"id\", \"mask\");
mask.style.position = \"absolute\";
//镜片
var mirror = $Create(\"div\");
mirror.setAttribute(\"id\", \"mirror\");
mirror.style.opacity = 0.3;
mirror.style.position = \"absolute\";
mirror.style.display = \"none\";
//小图
var smallImg = $Create(\"img\");
smallImg.setAttribute(\"src\", sImg);
smallImg.setAttribute(\"id\", \"smallImg\");
smallImg.onload = function () {
//如果没设置放大镜的height或者width 根据小图大小设置放大镜大小
if (!Magnifier.offsetHeight) {
Magnifier.style.width = this.offsetWidth+\"px\";
Magnifier.style.height = this.offsetHeight + \"px\";
}
//遮罩层大小和小图一样
mask.style.opacity = \"0\";
mask.style.width = this.width + \'px\';
mask.style.height = this.height + \"px\";
mask.style.zIndex = 2;
bigDiv.style.left = this.width + 5 + \"px\";
bigDiv.style.top = \"-5px\";
}
smallDiv.appendChild(mask);
smallDiv.appendChild(mirror);
smallDiv.appendChild(smallImg);
//视窗
var bigDiv = $Create(\"div\");
bigDiv.setAttribute(\"id\", \"big\");
bigDiv.style.position = \"absolute\";
bigDiv.style.overflow = \"hidden\";
bigDiv.style.display = \"none\";
var bigImg = $Create(\"img\");
bigImg.setAttribute(\"src\", bImg);
bigImg.setAttribute(\"id\", \"bigImg\");
bigImg.style.position = \"absolute\";
bigDiv.appendChild(bigImg);
Magnifier.appendChild(smallDiv);
Magnifier.appendChild(bigDiv);
}
function setMagnifierStyle(mirrorStyle,shichuangStyle) {
//mirror
for (var item in mirrorStyle) {
mirror.style[item] = mirrorStyle[item];
}
for (var item in shichuangStyle) {
$(\"big\").style[item] = shichuangStyle[item];
}
}
function registerEvent() {
$(\"mask\").onmouseover = function () {
$(\"big\").style.display = \"block\";
mirror.style.display = \"block\";
}
$(\"mask\").onmouseout = function () {
$(\"big\").style.display = \"none\";
mirror.style.display = \"none\";
}
$(\"mask\").onmousemove = function (evt) {
var oEvent = evt || event;
var disX = oEvent.offsetX;
var disY = oEvent.offsetY;
var mirrorLeft = disX - mirror.offsetWidth / 2;
var mirrorTop = disY - mirror.offsetHeight / 2;
if (mirrorLeft < 0) {
mirrorLeft = 0;
}
else if (mirrorLeft > 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小小的调用一下：
复制代码 代码如下:
window.onload = function () {
createElement(\"Magnifier\", \"images/Magnifier/small.jpg\", \"images/Magnifier/big.jpg\");
setMagnifierStyle({ \"width\": \"30px\", \"height\": \"30px\", \"backgroundColor\": \"#fff\" }, { \"width\": \"250px\", \"height\": \"250px\" });
registerEvent();
}
效果总算出来了耶，
2. 接下来咱们封装吧：
Magnifer类代码：
复制代码 代码如下:
function Magnifier(
MagnifierId, //放大镜容器ID
sImg, //小图片src
bImg, //大图片src
mirrorStyle, //小图片里镜片样式，json格式数据
ViewStyle //预览视窗样式，json格式数据
) {
var _this = this;
this.MagnifierContainer = null; //容器
this.smallDiv = null; //小图容器
this.mask = null; //小图遮罩层
this.mirror = null; //小图镜片
this.smallImg = null; //小图
this.bigDiv = null; //预览视图
this.bigImg = null; //大图
var init = function () {
_this.MagnifierContainer = _this.$(MagnifierId);
_this.createElement(sImg, bImg);
_this.setMagnifierStyle(mirrorStyle, ViewStyle);
_this.MainEvent();
}
init();
}
Magnifier.prototype.createElement = function (sImg, bImg) {
var _this = this;
var $Create = this.$Create;
this.MagnifierContainer.style.position = \'relative\'; //脱离文档流，视情况修改
this.smallDiv = $Create(\"div\");
this.smallDiv.setAttribute(\"id\", \"small\");
this.smallDiv.style.position = \"absolute\";
this.mask = $Create(\"div\");
this.mask.setAttribute(\"id\", \"mask\");
this.mask.style.position = \"absolute\";
this.mirror = $Create(\"div\");
this.mirror.setAttribute(\"id\", \"mirror\");
this.mirror.style.opacity = 0.3;
this.mirror.style.position = \"absolute\";
this.mirror.style.display = \"none\";
this.smallImg = $Create(\"img\");
this.smallImg.setAttribute(\"src\", sImg);
this.smallImg.setAttribute(\"id\", \"smallImg\");
this.smallImg.onload = function () {
//如果没设置放大镜的height或者width 根据小图大小设置放大镜大小
if (!_this.MagnifierContainer.offsetHeight) {
_this.MagnifierContainer.style.width = this.offsetWidth + \"px\";
_this.MagnifierContainer.style.height = this.offsetHeight + \"px\";
}
//遮罩层大小和小图一样
_this.mask.style.opacity = \"0\";
_this.mask.style.width = this.offsetWidth + \'px\';
_this.mask.style.height = this.offsetHeight + \"px\";
_this.mask.style.zIndex = 2;
_this.bigDiv.style.left = this.offsetWidth + 5 + \"px\";
_this.bigDiv.style.top = \"-5px\";
}
this.smallDiv.appendChild(this.mask);
this.smallDiv.appendChild(this.mirror);
this.smallDiv.appendChild(this.smallImg);
this.bigDiv = $Create(\"div\");
this.bigDiv.setAttribute(\"id\", \"big\");
this.bigDiv.style.position = \"absolute\";
this.bigDiv.style.overflow = \"hidden\";
this.bigDiv.style.display = \"none\";
this.bigImg = $Create(\"img\");
this.bigImg.setAttribute(\"src\", bImg);
this.bigImg.setAttribute(\"id\", \"bigImg\");
this.bigImg.style.position = \"absolute\";
this.bigDiv.appendChild(this.bigImg);
this.MagnifierContainer.appendChild(this.smallDiv);
this.MagnifierContainer.appendChild(this.bigDiv);
}
Magnifier.prototype.setMagnifierStyle = function (mirrorStyle, ViewStyle) {
for (var item in mirrorStyle) {
this.mirror.style[item] = mirrorStyle[item];
}
delete item;
for (var item in ViewStyle) {
this.bigDiv.style[item] = ViewStyle[item];
}
}
Magnifier.prototype.MainEvent = function () {
var _this = this;
this.mask.onmouseover = function () {
_this.bigDiv.style.display = \"block\";
_this.mirror.style.display = \"block\";
}
this.mask.onmouseout = function () {
_this.bigDiv.style.display = \"none\";
_this.mirror.style.display = \"none\";
}
this.mask.onmousemove = function (evt) {
var oEvent = evt || event;
var disX = oEvent.offsetX || oEvent.layerX; //兼容ff
var disY = oEvent.offsetY || oEvent.layerY;
var mirrorLeft = disX - _this.mirror.offsetWidth / 2;
var mirrorTop = disY - _this.mirror.offsetHeight / 2;
if (mirrorLeft < 0) {
mirrorLeft = 0;
}
else if (mirrorLeft > 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调用下：
复制代码 代码如下:
window.onload = function () {
new Magnifier(
\"Magnifier\",
\"images/Magnifier/small.jpg\",
\"images/Magnifier/big.jpg\",
{ \"width\": \"30px\", \"height\": \"30px\", \"backgroundColor\": \"#fff\" },
{ \"width\": \"250px\", \"height\": \"250px\" }
);
}
以上就是本文所述的全部内容了，希望大家能够喜欢。
本文地址：https://www.stayed.cn/item/13699
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)