Question

我非常接近实现目标。我正在尝试使用jQuery创建一个从左到右显示的图像。如果你看我的fiddle example你会看到从左到右出现一条波浪线。还有一条从左到右延伸的第二条波浪线。

我想删除从左到右延伸的波浪线，但保持从左到右平滑显示的波浪线

有人可以帮助我吗？

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>


<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script>


<style type="text/css">

body {
background-color: #003366;
margin: 0;
}

#myImg
{
top: 0px;
width:0px;
height:200px;
position:absolute;
left:0px;
background-image:url('http://www.tankten.com/codeimages/richtestslide2.png'); 
background-repeat:no-repeat;
opacity: 0.5;
z-index: 100;
}

#graphoverlaylines {
position:absolute;
left: 0px;
top: 0px;
z-index: 300;
}

#waveline {
top: 0px;
width:0px;
height: 200px;
position:absolute;
left: 0px;
background-image:url('http://www.tankten.com/codeimages/waveline.png'); 
background-repeat:no-repeat;
z-index: 250;

}

#baloon { width:381px; height:50px; position:absolute; left:0px; top:150px; z-index: 200;}
#baloon2 { width:381px; height:50px; position:absolute; left:0px; top:100px; z-index: 200;}
#baloon3 { width:381px; height:50px; position:absolute; left:0px; top:50px; z-index: 200;}

</style>

<script type="text/javascript">

$(function(){
$(document).ready(function() {
repeat();
});

function repeat()
{

$("#myImg").animate({
    top: '0px',
    width: '328px',
    height: '200px'
}, 6000,repeat);
$("#myImg").fadeOut(1000);
$("#myImg").animate({
    top: '0px',
    width:'0px',
    height: '200px',
}, 0);
$("#myImg").fadeIn(10);

}


});


$(function(){
$(document).ready(function() {
repeat2();
});

function repeat2()
{
$("#waveline").animate({
    top: '0px',
    width: '380px',
    height: '200px'
}, 6000,repeat2);
$("#myImg").fadeOut(1000);

$("#waveline").animate({
    top: '0px',
    width:'0px',
    height: '200px',
}, 10);
$("#waveline").fadeIn(100);

}


});


</script>

</head>


<body>

<div>
<img id="waveline" src="http://www.tankten.com/codeimages/waveline.png">
</div>


<div>
<img id="myImg" src="http://www.tankten.com/codeimages/richtestslide2.png">
</div>
<div>
<img id="graphoverlaylines" src="http://www.tankten.com/codeimages/graphoverlaylines.png">
</div>



<div id="baloon3"><img src="http://www.tankten.com/codeimages/richtest3.png" width="381" height="50px" /></div>
<div id="baloon2"><img src="http://www.tankten.com/codeimages/richtest2.png" width="381" height="50px" /></div>
<div id="baloon"><img src="http://www.tankten.com/codeimages/richtest.png" width="381" height="50px" /></div>



</body>
</html>

Answer 1

没有必要使用jQuery实现这一点，仅CSS就可以做到这一点。

您可以使用父overflow: hidden作为掩码，在其上应用width并将其0从381px设为动态body { background-color: #003366; margin: 0; } #myImg { top: 0px; width: 0px; height: 200px; position: absolute; left: 0px; background-image: url('http://www.tankten.com/codeimages/richtestslide2.png'); background-repeat: no-repeat; opacity: 0.5; z-index: 100; } #graphoverlaylines { position: absolute; left: 0px; top: 0px; z-index: 300; } #waveline-container { position: relative; width: 0; height: 200px; overflow: hidden; -webkit-animation: leftToRight 3s ease-in infinite; animation: leftToRight 3s ease-in infinite; } #waveline { top: 0px; height: 200px; position: absolute; left: 0px; background-image: url('http://www.tankten.com/codeimages/waveline.png'); background-repeat: no-repeat; z-index: 250; } #baloon { width: 381px; height: 50px; position: absolute; left: 0px; top: 150px; z-index: 200; } #baloon2 { width: 381px; height: 50px; position: absolute; left: 0px; top: 100px; z-index: 200; } #baloon3 { width: 381px; height: 50px; position: absolute; left: 0px; top: 50px; z-index: 200; } @-webkit-keyframes leftToRight { from { width: 0; } to { width: 381px; } } @keyframes leftToRight { from { width: 0; } to { width: 381px; } }（图片＆＃39;宽度）使用CSS @keyframes。

＆＃13;

<div id="waveline-container">
  <img id="waveline" src="http://www.tankten.com/codeimages/waveline.png">
</div>
<div>
  <img id="myImg" src="http://www.tankten.com/codeimages/richtestslide2.png">
</div>
<div>
  <img id="graphoverlaylines" src="http://www.tankten.com/codeimages/graphoverlaylines.png">
</div>
<div id="baloon3">
  <img src="http://www.tankten.com/codeimages/richtest3.png" width="381" height="50px" />
</div>
<div id="baloon2">
  <img src="http://www.tankten.com/codeimages/richtest2.png" width="381" height="50px" />
</div>
<div id="baloon">
  <img src="http://www.tankten.com/codeimages/richtest.png" width="381" height="50px" />
</div>

＆＃13;

{{1}}

＆＃13;

使用jquery从左到右显示图像

1 个答案: