0

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

这是小提琴链接小提琴代码

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

谢谢

4

2 回答 2

0

我在这里更新了你的小提琴，你可能需要微调一些大小和间距：http: //jsfiddle.net/Cbhsr/1/

关键是这段代码，它将宽度动画化为更小的东西。通过仅设置宽度，我们只需要对其进行动画处理。如果图像的高度和宽度都是通过 CSS 设置的，则必须为两者设置动画：

$("#introImg").animate({width: "100px"}, 1000);

于 2014-05-28T13:34:27.570 回答
0

似乎图像从右下角一点点开始动画，从近到远..

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

css

#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;
}

当然这是基本的东西，您需要添加前缀以支持更多浏览器并调整数字以获得您想要的:)

示例：http: //jsfiddle.net/suF4w/

于 2014-05-28T14:01:02.547 回答