Javascript TweenMax 不工作

Question

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

现在，这所做的只是在 (0, 0) 处显示图像，无论 x/y 值如何，父块没有缩放或剪裁，也没有圆边或阴影。所以我几乎在想我的 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 不工作？

我up-vote/mark回答所有做出有效回答和贡献的人:)

Answer 1

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

<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>

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

Javascript TweenMax 不工作

Javascript TweenMax not working

html

javascript

css

gsap