2017-08-03 145 views
0

這是我第一次在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不工作?

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

回答

0

什麼工作對我來說是改變HTTPSHTTP在:

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

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