使用jquery从左到右显示图像
Make an image appear from left to right using jquery
我离目标很近了。我试图创建一个图像出现从左到右使用jQuery。如果你看我的小提琴例子,你会看到从左到右出现一条波浪线。还有第二条波浪线从左向右延伸。
我想删除从左到右延伸的波浪线,但保留从左到右平滑的波浪线
有人能帮我吗?<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>
不需要jQuery来实现这一点,单独使用CSS就可以实现。
你可以使用父div
作为蒙版,通过在其上应用overflow: hidden
,并使用CSS @keyframes
将其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;
}
}
<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>
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 角度:在ng重复上切换图像
- 画廊图像未显示
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- Javascript排序的图像弹出窗口..可以't单独弹出
- 画布数据到图像
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 使图像在单击时展开到不大于浏览器
- Html页面上的多个Base64图像和平滑加载
- UIAutomation放大图像
- 使用javascript在Flash中加载外部图像
- 可以在这里为背景图像设置滤镜吗
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 使用 js 将背景图像设置为 HTML
- Javascript将图像src更改为淡入淡出
- 无法在本地计算机中将画布另存为图像
- 压缩phonegap中ios的图像插件
- 如何在鼠标悬停时在另一个图像上滑动图像.