jQuery 图像效果答案

【问题标题】：Jquery Image EffectjQuery 图像效果
【发布时间】：2014-05-28 13:00:42
【问题描述】：

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

这里是小提琴链接Fiddle code

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

谢谢

【问题讨论】：

标签： c# jquery html banner banner-ads

【解决方案1】：

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

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

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

【讨论】：

感谢 Evidica，这太完美了，你能看到它需要从左到右滑入的文本吗？这很好，但它仍然不像 flash 文本中的那样，我错过了什么/？
看看这个新小提琴jsfiddle.net/Cbhsr/2我在底部添加了几行CSS并更新了JavaScript。

【解决方案2】：

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

我会溢出容器并使用 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/

【讨论】：