网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 使用纯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" }
    );
    }
    以上就是本文所述的全部内容了，希望大家能够喜欢。
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/18 3:10:35