Jquery动画裁剪边框

Jquery animation cutting the border

本文关键字：边框 裁剪 动画 Jquery      更新时间：2023-09-26

嗨，我用Jquery制作了一个横幅动画，它的工作很好，除了图像效果是切割边界。它应该出现在一个容器内，但我试图解决它，但问题仍然是一样的。这里是一个链接，在这里输入链接描述

    <div id="mainContainer">
                <img id="introImg" src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png"/>

        <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);
     $("#introImg").animate({width: "100px"}, 1000);
    });

#mainContainer{
     background-image:url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
    width:300px;
    height:250px;
    border: 1px solid #5e6a71;
border-style:solid;
border-width:5px;
 border-color:#BACAE4;
    overflow: hidden;
    position: relative
}
#introImg{
    position:absolute;
    top:60px;
    left:170px;
    border-radius: 50%;
    width:300px;
    opacity: 100;
}
#text1, #text2, #text3
{
     margin:60px 8px;
}
#ctaBtn{
    top:200px;
    left:25px;
    position:absolute;
}

问题是父元素#mainContainer有一个带边框的背景图像，并且该背景图像始终低于#mainContainer内容。你可以解决这个问题，但从背景图像中删除边框，并增加#mainContainer的边框大小，以具有相同的样式。

还有另一种选择:-修改#mainContainer html为:

<div id="mainContainer">
<img class="bgImg" src="https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif" />
<img style="width: 100px;" id="introImg" src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png">
<div id="text1" style="position: absolute; left: 10px;">Striped Bag</div><br>
<div id="text2" style="position: absolute; left: 10px;">$14</div><br>
<div id="text3" style="position: absolute; left: 10px;">Sale $25</div><br>

和CSS样式:

#mainContainer{
 /*background-image:url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');*/ /* remove the background image from the CSS */
width:300px;
height:250px;
border: 1px solid #5e6a71;
border-style:solid;
border-width:5px;
border-color:#BACAE4;
overflow: hidden;
position: relative;
z-index: 10000000;
}
#introImg{
position:absolute;
top:60px;
left:170px;
border-radius: 50%;
width:300px;
opacity: 100;
z-index: 2; /* new property */
}
/* new class */
.bgImg {
position: absolute;
top: 0;
left: 0;
z-index: 1;}
相关文章：