Question

我想创建一个画廊网站，并希望图像在悬停时会扩展（带有过渡），并且在单击时会变大。悬停扩展仅适用于CSS，全尺寸扩展适用于javascript。但是单击图像一次后，悬停过渡将不再起作用。我目前怀疑javascript中设置的值只会覆盖CSS对应项。我的问题是这是否完全正确，以及如何解决这个问题。

我的代码：

var imgSelected = false;
var imgElement;

var fullSize = function(element) {
    imgSelected = true;
    imgElement = element;
    $(element).addClass("fullSize");
    $(element).removeClass("images div:hover");
    $(element).children("img").removeClass("img:hover");
    $("body").css({"visibility":"hidden", "overflow":"hidden"});
    $(element).css("visibility", "visible");
    $(element).siblings("div").css("visibility", "hidden");
    var imgW = $(element).children("img").width();
    var imgH = $(element).children("img").height();
    if (imgH/imgW * window.innerWidth > window.innerHeight) {
        $(".fullSize").css({"background-size":"auto 100%"});
        $(".fullSize img").css({"top":"0", "height":"100%", "width":"auto", "left":"50%", "transform":"translate(-50%, 0)"});
        //stop transition
        $(".fullSize img").css({"transition":"none", "-webkit-transition":"none", "-moz-transition":"none"});
    } else if (imgW/imgH * window.innerHeight > window.innerWidth) {
        $(".fullSize").css({"background-size":"100% auto"});
        $(".fullSize img").css({"left":"0", "width":"100%", "height":"auto", "top":"50%", "transform":"translate(0, -50%)"});
        //stop transition
        $(".fullSize img").css({"transition":"none", "-webkit-transition":"none", "-moz-transition":"none"});
    }
    $(".close").css("visibility", "visible");
}

var fullSizeReverse = function() {
    imgSelected = false;
    $(imgElement).removeClass("fullSize");
    $(imgElement).addClass("images div:hover");
    $(imgElement).children("img").addClass("img:hover");
    $("body").css({"visibility":"visible", "overflow-y":"scroll"});
    $(".close").css("visibility", "hidden");
    $(imgElement).siblings("div").css("visibility", "visible");
    $(imgElement).children("img").css({"width":"30%", "transform":"translate(0, 0)"});
    //$(imgElement).css({"background-size":"30% 100%"});
    imgElement = null;
    setTimeout(function() {}, 100);
}

$(".images div").click(function(e) {
    fullSize(this);
});

/* gallery images */

.images {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}

.images div {
    pointer-events: none;
    display: flex;
    justify-content: center;
    background-size: 30% 100%;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-transition: background-size 0.8s ease-in-out;
    -moz-transition: background-size 0.8s ease-in-out;
    transition: background-size 0.8s ease-in-out;
    margin-bottom: 40vh;
}

.images div:last-child {
    margin-bottom: 15vh;
}

img {
    pointer-events: auto;
    width: 30%;
    height: auto;
    opacity: 0;
    -webkit-transition: width 0.8s ease-in-out, opacity 2s ease-in-out;
    -moz-transition: width 0.8s ease-in-out, opacity 2s ease-in-out;
    transition: width 0.8s ease-in-out, opacity 2s ease-in-out;
}

.images div:hover {
    background-size: 40% 100%;
    cursor: pointer;
}

img:hover {
    width: 40%;
    height: auto;
    opacity: 1;
}

.fullSize {
    position: fixed;
    z-index: 1;
}

.fullSize img {
    position: fixed;
    opacity: 1;
    cursor: "default";
    z-index: 1;
}

/* close button */ 

.close {
    visibility: hidden;
    position: fixed;
    top: 2vmax;
    left: 2vmax;
    width: 32px;
    height: 32px;
    opacity: 0.3;
    z-index: 2;
}

.close:hover {
    opacity: 1;
}

.close:before, .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #333;
}

.close:before {
    transform: rotate(45deg);
}

.close:after {
    transform: rotate(-45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="images">
    <h3>Images</h3>
    <a href="#" class="close" onclick="fullSizeReverse()"></a>
    <div id="work1">
        <img src="../img/work1color.jpg"/>
    </div>
    <div id="work2">
        <img src="../img/work2color.png"/>
    </div>
    <div id="work3">
        <img src="../img/work3color.jpg"/>
    </div>
</div>

我还使用CodePen重新创建了该效果的简单版本：

https://codepen.io/monodualist/pen/NBdvNw

Answer 1

此处

extern

应该是

    $(imgElement).children("img").css({"width":"30%", "transform":"translate(0, 0)"});

Answer 2

在codepen中，您必须像这样取消设置宽度和高度

var boxClicked = false;

function fullSize(element) {
  if (boxClicked) {
    boxClicked = false;
    element.style.width = null;
    element.style.height = null;    
  } else {
    boxClicked = true;
    element.style.width = "250px";
    element.style.height = "250px"; 
  }
}

具有javascript值的CSS过渡

2 个答案: