Question

我正在练习我的香草javascript，通过编写图片库应用程序。

我正在处理的功能是从imageRoll到我的mainImage的交换。交换工作正常，高度/宽度计算也正常工作......但是当我告诉它计算父元素和新图像的边距时，它会失败，除非你第二次点击源图像。

JSFiddle：https://jsfiddle.net/un64w9hh/2/

这是功能代码：

function galleryToMainImg() {
    var gNumList = this.parentNode.classList;
    var gNum = gNumList[0].slice(1,2);
    var imgId = "g" + gNum + "MainImage";
    var imgName = document.getElementById(imgId);
    var height = this.offsetHeight;
    var width = this.offsetWidth
    var styles;
    var ratio;

    imgName.src = this.src;

    if (height > width) {
        ratio = (width / height) * 100;
        styles = "height:100%; margin: 0px " + ((imgName.parentNode.offsetWidth - imgName.offsetWidth) / 2) + "px;";

    } else if (width > height){
        ratio = (height / width) * 100;
        styles = "width:100%; margin: " + ((imgName.parentNode.offsetHeight - imgName.offsetHeight) / 2) + "px 0px;";
    } else {
        ratio = 1;
        styles = "width:100%; margin: " + ((imgName.parentNode.offsetHeight - imgName.offsetHeight) / 2) + "px 0px;";           
    }

    imgName.style = styles;
}

有趣的是，只要从图库中点击的图像是相同的布局（纵向与横向），它每次在第一个之后都有效。但是如果你切换布局，它每次都会中断。

首先点击：

<img id="g1MainImage" src="./images/image01.png" alt="Caption" style="height: 100%; margin: 0px;">

第二次点击：

<img id="g1MainImage" src="http://ne.fario.us/designs/ImageGallery/images/image01.png" alt="Caption" style="height: 100%; margin: 0px 9px;">

我只是不确定发生了什么。任何帮助将不胜感激。

Answer 1

我一直在使用你的代码很长一段时间，你的函数galleryToMainImg()很好，比率和.offsetWidth属性都可以。我已经从.css中删除了每个保证金属性，并且错误仍然存在。

离开计算，这很有效（没有错误，但我仍然没有.css应用的边距属性）：

function galleryToMainImg() {
    gNumList = this.parentNode.classList;
    gNum = gNumList[0].slice(1,2);
    imgId = "g" + gNum + "MainImage";
    imgName = document.getElementById(imgId);
    height = this.offsetHeight;
    width = this.offsetWidth;
    styles='';
    ratio='';

    imgName.src = this.src;

    if (height > width) {
        ratio = (width / height) * 100;
        styles = 'height:100%; margin-left: 38%; margin-top: 0%'; /*+((imgName.parentNode.offsetWidth - imgName.offsetWidth) / 2)*/

    } else if (width > height){
        ratio = (height / width) * 100;
        styles = "width:100%; margin-left: 7%; margin-top: 0%";/*+ ((imgName.parentNode.offsetHeight - imgName.offsetHeight) / 2) + "px;"*/

    } /*else {
        ratio = 1;
        styles = 'width:100%; margin: "' + ((imgName.parentNode.offsetHeight - imgName.offsetHeight) / 2) + 'px;"';           
    }*/

    imgName.style = styles;
}

希望它对将来的考试有所帮助。

Answer 2

这是正常的，因为您更改了点击的图像大小。我更新了你的小提琴以查看警报。见hier jsfiddle.net/un64w9hh/4 /

Javascript / CSS图像高度/宽度/边距计算不会同时生效

2 个答案: