Javascript TweenMax 不工作

Question

这是我第一次在 JavaScript 中使用 TweenMax。我正在尝试创建一个函数，该函数将创建一个具有圆 Angular 边缘的“卡片”，最终将保存图像和文本。现在我只想在我的一个标签内以一定的大小和位置制作一个内部图像(此时裁剪无关紧要)。

现在，它所做的只是在 (0, 0) 处显示图像，无论 x/y 值如何，父 block 没有缩放或剪裁，也没有圆形边缘或阴影。所以我几乎在想我的 TweenMax 没有工作，或者我没有做正确的事情。

cards.js

mainView = document.getElementById('mainView');

create_card(25, 25, "image.png");

function create_card(theX, theY, img){
    //CARD VARS
    cardElement = document.createElement('div');
    cardElement.setAttribute('class', 'card');
    cardImage = document.createElement('img');
    cardImage.setAttribute('src', img);
    cardImage.setAttribute('class', 'image');

    //LAYOUTS
    TweenMax.set(".card", {
        position:'absolute',
        display: 'block',
        x: theX,
        y: theY,
        width:140,
        height:140,
        backgroundColor:'#ff0000',
        borderRadius:2,
        overflow:'hidden',
        scale:1,
        boxShadow:'5px 5px 5px #ff7f00'
    });

    //APPEND CARD TO STAGE
    cardElement.appendChild(cardImage);
    mainView.appendChild(cardElement);
}

在 HTML 的正文中:

<div id="wrapper">
    <div id="mainView" class="mainView"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="javascript/cards.js"></script>

CSS 样式表(我认为这可能不相关但要全面):

body{
    background-color: #888888;
    margin: 0 0 0 0;
}

#wrapper {
    margin-left: 100px;
}

#mainView {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    height: 100%;
    background-color: #444444;
    box-shadow: 0px 0px 10px #222222;
}

因此，将其汇总为一个问题:为什么我的 TweenMax 不起作用？

我对所有做出有效答案和贡献的人投票/标记答案:)

Answer 1

对我有用的是将 https 更改为 http:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>

像这样:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>

如此简单的解决方案哈哈哈。我很久以前就发现了这一点，但也许有人会发现这很有用:)