Javascript TweenMax無法正常工作

這是我第一次在JavaScript中使用TweenMax。我試圖創建一個函數，它將創建一個帶有圓邊的「卡片」，最終將保存圖像和文本。現在我只想製作一張帶有內部圖像的剪輯（此時裁剪無關緊要），在我的一個標籤內部具有特定的大小和位置。Javascript TweenMax無法正常工作

現在，所做的只是在（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不工作？

我贊成票/馬克回答所有誰做出有效回答和貢獻:)

來源

2017-08-03 newplayer65

什麼工作對我來說是改變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>

這樣一個簡單的解決方案哈哈哈。我在一段時間之前發現了這一點，但也許有人會發現這有用:)

來源

2017-08-08 23:34:21 newplayer65

Javascript TweenMax無法正常工作

回答

相關問題