C# Jquery图像效果

嗨，我正在使用Jquery将flash广告的横幅复制到Html5中。这里是我想要转换的链接，到目前为止，我已经能够完成文本效果，但只剩下图像动画，我需要关于如何使用Jquery广告图像动画的帮助，以便图像将在我定义的容器中工作

这是小提琴链接

Sizmek

条纹袋

14美元

售价25美元

$（文档）.ready（函数（）{
$（“#text1”）.animate（{左：+=30}，500）；
$（“#text1”）.animate（{左：“-=20”}，200）；
$（“#text2”）.delay（300）。动画（{左：+=30}，500）；
$（“#text2”）.animate（{左：“-=20”}，200）；
$（“#text3”）.delay（400）。动画（{左：+=30}，500）；
$（“#text3”）.animate（{左：“-=20”}，200）；
});
#主容器{
宽度：298px；
高度：248px；
边框：1px实心#5e6a71；
边框样式：实心；
边框宽度：5px；
边框颜色：#BACAE4；
}
#图像img{
位置：绝对位置；
顶部：60px；
左：170px；
边界半径：50%；
宽度：100px；
高度：100px；
不透明度：0；
}
#标题文本p{
宽度：165px；
位置：绝对位置；
顶部：90px；
左：120px；
不透明度：0；
}

---

谢谢

我在这里更新了您的小提琴，您可能需要微调一些大小和间距：

关键是这段代码，它将宽度设置为更小的值。通过仅设置宽度，我们只需在其上设置动画。如果图像的高度和宽度都是通过CSS设置的，则必须同时设置动画：

$（“#introImg”）.animate（{width:“100px”}，1000）；

图像似乎从右下角过了一点，然后从近到远进行动画制作

我会使容器溢出，并使用translate3d设置动画：

css

---

当然，这是最基本的东西，你需要添加前缀来支持更多的浏览器，并通过数字来获得你想要的：）

---

示例：

谢谢Evidica，这很完美，你能看到它需要从左向右滑动的文本吗？这很好，但它仍然不是flash文本中的文本。我是否遗漏了任何内容/？看看这把新小提琴我在底部添加了几行CSS并更新了JavaScript。

<div id="mainContainer">        
    <div id="logo"  style="position:absolute;color:blue; font-size:30px;top:6px; left:6px">Sizmek</div><br />
        <div id="text1" style="position:absolute;">Striped Bag</div><br />
        <div id="text2" style="position:absolute;">$14</div><br />
        <div id="text3" style="position:absolute;">Sale $25</div><br />
    </div>




$(document).ready(function () {
        $("#text1").animate({ left: "+=30" }, 500);
        $("#text1").animate({ left: "-=20" }, 200);
        $("#text2").delay(300).animate({ left: "+=30" }, 500);
        $("#text2").animate({ left: "-=20" }, 200);
        $("#text3").delay(400).animate({ left: "+=30" }, 500);
        $("#text3").animate({ left: "-=20" }, 200);
    });


#mainContainer{
    width:298px;
    height:248px;
    border: 1px solid #5e6a71;
border-style:solid;
border-width:5px;
 border-color:#BACAE4;
}

#images img{
    position:absolute;
    top:60px;
    left:170px;
    border-radius: 50%;
    width:100px;
    height:100px;
    opacity: 0;
}

#headlineText p{
    width:165px;
    position:absolute;
    top:90px;
    left:120px;
    opacity: 0;
}

#introImg{
        position:absolute;
        top:60px;
        left:170px;
        border-radius: 50%;
        width:100px;
        height:100px;
        opacity: 0;
        -webkit-transform: perspective(25px) translate3d(320px,320px,-50px); 
        transform:perspective(15px) translate3d(40px,40px,-50px);
        -webkit-transition:all 1s ease;
}