管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

使用纯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" }

　　);

　　}

　　以上就是本文所述的全部内容了，希望大家能够喜欢。

教程首页 更多教程