Question

感谢Stack Overflow我设法通过使用javaScript预加载图像来解决我遇到的不一致转换问题。

要跳过正在发挥作用的内容，我不会发布所有代码。简而言之，我在我的HTML上有一个图像，一个按钮在点击时会触发一个过渡，其中另一个图像通过向下滑动取而代之。通过在我的javascript中创建img来解决我遇到的不一致问题（因为它以更快的方式加载）。然后我应用一些执行转换的类。以下是相关代码：

HTML

<div class="page page-1"><img src="myFirstImage.jpg" width="100%"></div>
<div id="myDiv"class="page page-2"></div>

CSS

.page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: block;

}

.page img {
   min-height: 100%;
}

 .pt-page-moveFromTop {
        -webkit-animation: moveFromTop 2s ease both;
        animation: moveFromTop 2s ease both;
    }

.pt-page-moveToBottom {
    -webkit-animation: moveToBottom 2s ease both;
    animation: moveToBottom 2s ease both;
}


@keyframes moveFromTop {
    from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@keyframes moveToBottom {
    from { }
    to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

的javaScript

var image2 = new Image(); 

image2.src = "mySecondImg.jpg";

$(document).ready( function () {

   $('.myButton').click(function(){

       $('.page-1').addClass('pt-page-moveToBottom');
       $('.page-2').append(image2);
       $('.page-2').addClass('pt-page-moveFromTop');

    });  
});

这一切都有效，但我的第二张图片并没有通过课程＆＃34; page＆＃34;和＆＃34;第2页＆＃34;。所以我的问题是，如何将这些样式应用于我在js中创建的图像（）。我尝试过像

这样的东西

image2.addClass("page page-2");

但那并不是这样。完成此任务的最佳方法是什么？谢谢你的时间。

Answer 1

你在这里混合javascript和jquery。 add class函数只适用于jquery元素。

你应该像-vvv

那样做

Answer 2

因为你使用了

var image2 = new Image(); 
image2.src = "mySecondImg.jpg";

然后我猜你可能想要使用纯JS解决方案直到最后。然后，您可以使用以下方式分配图像类：

image2.className = "className";

或添加另一个类名：

image2.className += " className"; //with a space before

Answer 3

$('.page-2').addClass('pt-page-moveFromTop');将类添加到img 容器，而不是img本身。你应该改为$('.page-2 img').addClass('pt-page-moveFromTop');。

如何设置使用javaScript创建的图像的样式

3 个答案: