Jquery图像效果

本文关键字：图像 Jquery | 更新日期: 2023-09-27 18:05:38

嗨，我正在使用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;
}

谢谢

Jquery图像效果

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

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

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

看起来图像是从右下角开始动画的，从近到远…

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

相关文章：