jd或者淘宝的具体商品有个放大镜的效果。虽然网上类似插件琳琅满目,应用到项目上有诸多不便,自己抽点时间自己写了个类似插件,积累下代码,何乐而不为呢!!let‘go:

  1. 打算把此特效封装成个插件,先把最基本的算法实现,然后再一步步封装吧:

最终实现效果:

html 代码:

<div id="Magnifier"></div>

css 代码:

 <style>
* {
margin:;
padding:;
}
</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" }
);
}

js-放大镜效果的更多相关文章

  1. 最全js 放大镜效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 原生js放大镜效果

    效果: 1.  鼠标放上去会有半透明遮罩.右边会有大图片局部图 2.  鼠标移动时右边的大图片也会局部移动 放大镜的关键原理: 鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置 ...

  3. jS放大镜效果

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo4.aspx.cs& ...

  4. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  5. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

  6. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  7. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

  8. jquery+js实现鼠标位移放大镜效果

    jQuery实现仿某东商品详情页放大镜效果 用jquery+js实现放大镜效果,效果大概如下图! 效果是不是大家很感兴趣,放大镜查看细节,下边大家可以详细看一看具体是怎么实现的.下边直接看代码! HT ...

  9. js、jquery实现放大镜效果

    在一些电商网站的商品详情页面,都会有放大镜效果,实现起来并不是很困难,今天用了两个小时,写了一个放大镜效果的实例,来分享给大家! 实现的效果大概是这个样子的 预览 先来看一下效果吧,点击下面的链接预览 ...

  10. js之放大镜效果

      HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. Windows定时任务+bat文件+WinRar处理Mysql数据库的定时自动备份

    服务器环境 Windows Server 2003 ,服务器上采用的是IIS+mysql的集成工具phpStudy.MySQL的安装目录D:\phpStudy4IIS , WinRAR 安装目录 C: ...

  2. nginxUbuntu安装Nginx和正确卸载Nginx Nginx相关 与Nginx报错:nginx: [error] invalid PID number "" in "/run/nginx.pid" 解决方法

    https://www.cnblogs.com/zhaoyingjie/p/6840616.html https://blog.csdn.net/adley_app/article/details/7 ...

  3. Learning OSG programing---Multi Camera in one window 在单窗口中创建多相机

    在学习OSG提供的例子osgCamera中,由于例子很长,涉及很多细节,考虑将其分解为几个小例子.本文介绍实现在一个窗口中添加多个相机的功能. 此函数接受一个Viewer引用类型参数,设置图形上下文的 ...

  4. SAP选择屏幕开发(一)(转)

    原文链接:https://blog.csdn.net/wtxhai/article/details/90632686 用户通过屏幕操作来实现与SAP的数据交互,而SAP的屏幕开发一般分为两种,一种是通 ...

  5. 洛谷 P3368 【模板】树状数组 2(区间加,单点查询)

    题目链接 https://www.luogu.org/problemnew/show/P3368 树状数组 最基础的用法:https://www.cnblogs.com/yinyuqin/p/1096 ...

  6. [暑假集训Day1T3]新的开始

    新建一个虚拟节点后直接跑最小生成树即可,从虚拟节点往每个节点连的边权为每个点建发电站的代价,许多人的考场贪心策略是:先构建原图的最小生成树后找一个花费最小的地方建发电厂.但是这样做不对的地方在于:如果 ...

  7. 最小生成树,Prim算法实现

    最小生成树 所谓最小生成树,就是一个图的极小连通子图,它包含原图的所有顶点,并且所有边的权值之和尽可能的小. 首先看看第一个例子,有下面这样一个带权图: 它的最小生成树是什么样子呢?下图绿色加粗的边可 ...

  8. k8s ingress路由强制跳转至https设置

    为ingress配置增加注解(annotations):nginx.ingress.kubernetes.io/ssl-redirect: 'true' 就可以实现http强制跳转至https 不过默 ...

  9. mybatis where 中in的使用

    当我们使用mybatis时,在where中会用到 in 如: where name in ('Jana','Tom'); 我们可以在sql中直接写 name in ('Jana','Tom') 或者 ...

  10. vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin

    场景: . webpack2.4.*集成vue-loader@15.7.2报错 原因: 参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plu ...