Javascript 使用jquery从左到右显示图像
我离实现目标很近了。我正在尝试使用jQuery创建一个从左到右显示的图像。如果你看我的，你会发现有一条从左到右的波浪线。还有第二条波浪线从左向右延伸 我想删除从左向右延伸的波浪线，但保留从左向右平滑显示的波浪线 有人能帮我吗Javascript 使用jquery从左到右显示图像,javascript,jquery,html,css,fadein,Javascript,Jquery,Html,Css,Fadein,我离实现目标很近了。我正在尝试使用jQuery创建一个从左到右显示的图像。如果你看我的，你会发现有一条从左到右的波浪线。还有第二条波浪线从左向右延伸 我想删除从左向右延伸的波浪线，但保留从左向右平滑显示的波浪线 有人能帮我吗 <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo</ti
<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>
-JSFIDLE演示
身体{
背景色：#003366；
保证金：0；
}
#myImg
{
顶部：0px；
宽度：0px；
高度：200px；
位置：绝对位置；
左：0px；
背景图像：url（'http://www.tankten.com/codeimages/richtestslide2.png');
背景重复：无重复；
不透明度：0.5；
z指数：100；
}
#石墨层线{
位置：绝对位置；
左：0px；
顶部：0px；
z指数：300；
}
#波线{
顶部：0px；
宽度：0px；
高度：200px；
位置：绝对位置；
左：0px；
背景图像：url（'http://www.tankten.com/codeimages/waveline.png');
背景重复：无重复；
z指数：250；
}
#baloon{宽度：381px；高度：50px；位置：绝对；左侧：0px；顶部：150px；z索引：200；}
#baloon2{宽度：381px；高度：50px；位置：绝对；左侧：0px；顶部：100px；z索引：200；}
#baloon3{宽度：381px；高度：50px；位置：绝对；左侧：0px；顶部：50px；z索引：200；}
$（函数（）{
$（文档）.ready（函数（）{
重复（）；
});
函数重复（）
{
$（“#myImg”）。设置动画({
顶部：“0px”，
宽度：“328px”，
高度：“200px”
}，6000，重复）；
美元（“#myImg”）。淡出（1000）；
$（“#myImg”）。设置动画({
顶部：“0px”，
宽度：'0px'，
高度：“200px”，
}, 0);
$（“#myImg”）。法代因（10）；
}
});
$（函数（）{
$（文档）.ready（函数（）{
重复2（）；
});
函数repeat2（）
{
$（“#波线”）。设置动画({
顶部：“0px”，
宽度：“380px”，
高度：“200px”
}，6000，2）；
美元（“#myImg”）。淡出（1000）；
$（“#波线”）。设置动画({
顶部：“0px”，
宽度：'0px'，
高度：“200px”，
}, 10);
$（“#波线”）。法代因（100）；
}
});
div溢出：隐藏宽度0381px正文{
背景色：#003366；
保证金：0；
}
#myImg{
顶部：0px；
宽度：0px；
高度：200px；
位置：绝对位置；
左：0px；
背景图像：url（'http://www.tankten.com/codeimages/richtestslide2.png');
背景重复：无重复；
不透明度：0.5；
z指数：100；
}
#石墨层线{
位置：绝对位置；
左：0px；
顶部：0px；
z指数：300；
}
#波线容器{
位置：相对位置；
宽度：0；
高度：200px；
溢出：隐藏；
-webkit动画：leftToRight 3s无限轻松；
动画：leftToRight 3s无限轻松；
}
#波线{
顶部：0px；
高度：200px；
位置：绝对位置；
左：0px；
背景图像：url（'http://www.tankten.com/codeimages/waveline.png');
背景重复：无重复；
z指数：250；
}
#阳台{
宽度：381px；
高度：50px；
位置：绝对位置；
左：0px；
顶部：150px；
z指数：200；
}
#巴隆2号{
宽度：381px；
高度：50px；
位置：绝对位置；
左：0px；
顶部：100px；
z指数：200；
}
#巴隆3{
宽度：381px；
高度：50px；
位置：绝对位置；
左：0px；
顶部：50px；
z指数：200；
}
@-webkit关键帧leftToRight{
从{
宽度：0；
}
到{
宽度：381px；
}
}
@左向右关键帧{
从{
宽度：0；
}
到{
宽度：381px；
}
}