这是我第一次在JavaScript中使用TweenMax。我正在尝试创建一个函数,该函数将创建带有圆形边缘的“卡片”,最终将保留图像和文本。现在,我只想在其中一个图像中以一定的大小和位置在图像中放置一个图像(此时,剪切是不相关的)。
现在,无论x / y值如何,所有这些操作都将图像显示为(0,0),父块没有缩放或裁剪,并且没有圆角或阴影。因此,几乎我在想我的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无法正常工作?
我向所有做出有效答案和贡献的人投票/标记答案:)
最佳答案
对我有用的是将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>
这么简单的解决办法哈哈哈。我很早以前就发现了这一点,但是也许有人会发现这个有用的:)