我做了这个:jsfiddle.net/BWncv/ 我有一杯 Steam 茶。我想为这个 Steam 制作动画。但是这个动画并不顺利。
Steam 必须向上、向上、向上移动。就像一杯茶顶部的 Steam 。你可以在链接中看到它。
我怎样才能修复它以使烟雾具有良好的动画效果？
你可以在js fiddle上改代码并更新。
最佳答案
试试这个(demo):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
#viewport {
position: relative;
width: 400px;
height: 300px;
margin: 100px auto;
border: 1px solid #333333;
overflow: hidden;
}
#viewport .smoke {
position: absolute;
width: 20px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
}
#viewport .smoke1 {
left: 140px;
top: 260px;
}
#viewport .smoke2 {
left: 180px;
top: 260px;
}
#viewport .smoke3 {
left: 220px;
top: 260px;
}
</style>
</head>
<body>
<div id="viewport">
<div class="smoke smoke1"></div>
<div class="smoke smoke2"></div>
<div class="smoke smoke3"></div>
</div>
<script type="text/javascript">
(function () {
"use strict";
$('#viewport .smoke').each(function ns () {
var initialTop = $(this).position().top;
$(this).animate({
top: - $(this).height()
}, Math.random() * 2000 + 2000, function () {
$(this).css({
top: initialTop,
opacity: 0
});
}).animate({
opacity: 1
}, ns);
});
}());
</script>
</body>
</html>
这里有一些额外的演示 http://jsfiddle.net/nRas9/1/这完全随机化了元素。
我的最终代码，虽然有点复杂:
http://jsfiddle.net/Fbtug/32/ (感谢 Luke Stanley 更新)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
#viewport {
position: relative;
width: 1000px;
height: 600px;
margin: 100px auto;
border: 1px solid #333333;
overflow: hidden;
background: transparent url("http://www.mikevierwind.nl/images/bg-selection.jpg") no-repeat 0px -29px;
}
#viewport .smoke {
position: absolute;
width: 215px;
height: 410px;
bottom: 230px;
left: 90px;
}
.smoke1 {
background: transparent url("http://www.mikevierwind.nl/images/stoom1.png");
}
.smoke2 {
background: transparent url("http://www.mikevierwind.nl/images/stoom2.png");
}
.smoke3 {
background: transparent url("http://www.mikevierwind.nl/images/stoom3.png");
}
</style>
</head>
<body>
<div id="viewport">
<img
src="http://www.mikevierwind.nl/images/bg-selection-carousel.png"
width="2610"
height="600"
alt=""
class="carousel-image"
/>
</div>
<script type="text/javascript">
(function () {
"use strict";
var i = 0;
for (; i < 3; i += 1) {
setTimeout((function (idx) {
return function addSmoke () {
var
time = 7500,
smoke = $('<div />', {
class: 'smoke smoke' + (idx + 1),
css: {
opacity: 0
}
});
// add to viewport
$(smoke).appendTo('#viewport');
// animate
$.when(
// animate to 100% opacity in some part of the total time (fade in)
$(smoke).animate({
opacity: 1
}, {
duration: time * 0.2,
easing: 'linear',
queue: false,
// animate to 0% opacity in the remaining time (fade out)
complete: function () {
$(smoke).animate({
opacity: 0
}, {
duration: time * 0.8,
easing: 'linear',
queue: false
});
}
}),
// animate movement
$(smoke).animate({
bottom: $('#viewport').height()
}, {
duration: time,
easing: 'linear',
queue: false
})
// when all done, remove and add new random smoke
).then(function () {
$(smoke).remove();
addSmoke();
});
};
}(i % 3)), i * 2500);
}
}());
</script>
</body>
</html>
关于javascript - 像一杯茶一样用 Steam 制作动画图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7832507/