使用CSS或Javascript填充动画 [英] fill animation using CSS or Javascript
本文介绍了使用CSS或Javascript填充动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我只是想知道是否可以使用CSS或javascript创建一个填充动画？
基本上我想创建一个填充动画， image bellow：
http：//i40.tinypic .com / eit6ia.png
红色是填充，黑色是空白。
这是我的代码，Jeff发布的图像，但它不工作的原因！我失去了什么？
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>无标题文档< / title>
< style type =text / css>
#black {
position：absolute;
z-index：2;
color：black;
font-weight：bold;
font-size：2em;
width：768px;
}
#red {
position：absolute;
z-index：10;
left：8px;
width：0px;
overflow：hidden;
font-weight：bold;
font-size：2em;
color：red;
}
< / style>
< script language =javascript>
var red = document.getElementById（'red'）;
red.style.width =0px;
red.style.height =1024px;
var animation = setInterval（function（）{
if（parseInt（red.style.width，10）== 768）
clearInterval（animation）;
red.style.width = parseInt（red.style.width，10）+2 +px;
}，10）;
< / script>
< / head>
< body>
< div>< img id =blacksrc =http://www.ratemotorcycle.com/image1/5/53/kawasaki-ninja-zx10r-2013.jpg/> img id =redsrc =http://imageshack.us/a/img39/3517/13kawasakizx10r1.jpg/>< / div>
< / body>
< / html>
解决方案
我有CSS风格的乐趣。
现场演示文字）
即时演示）
图片动画
HTML
< div>
< img id =blacksrc =http://www.ratemotorcycle.com/image1/5/53/kawasaki-ninja-zx10r-2013.jpg/>
< img id =redsrc =http://imageshack.us/a/img39/3517/13kawasakizx10r1.jpg/>
< / div>
CSS
#black {
/ *添加位置和z-index以确保图像正确重叠* /
position：absolute;
z-index：2;
/ *造型乐趣* /
颜色：黑色;
font-weight：bold;
font-size：2em;
/ *默认宽度* /
width：768px;
}
#red {
/ * Position和z-index让我们覆盖#black和#red元素* /
position：absolute;
z-index：10;
/ *这是将元素直接放在#black元素上
（补偿#black元素的边距/填充* /
left：8px;
/ *我们使初始宽度为0px并隐藏溢出* /
width：0px;
overflow：hidden;
/ *有趣的样式*
font-weight：bold;
font-size：2em;
color：red;
}
JavaScript
var red = document.getElementById（'red'）;
red.style.width =0px;
/ *设置高度，使图像不缩放* /
red.style.height =1024px;
var animation = setInterval（function（）{
if（parseInt（red.style.width，10）== 768）clearInterval（animation）;
red.style。 width = parseInt（red.style.width，10）+ 2 +px;
}，10）;
文字动画
HTML
< div>
< span id =black> LOGO< / span>
< span id =red> LOGO< / span>
< / div>
CSS
#black {
/ *有趣的造型* /
color：black;
font-weight：bold;
font-size：2em;
}
#red {
/ * Position和z-index让我们覆盖#black和#red元素* /
position：absolute;
z-index：10;
/ *这是将元素直接放在#black元素上
（补偿#black元素的边距/填充* /
left：8px;
/ *我们使初始宽度为0px并隐藏溢出* /
width：0px;
overflow：hidden;
/ *有趣的样式*
font-weight：bold;
font-size：2em;
color：red;
}
JavaScript
/ *在窗口加载时（当页面加载时）* /
window.onload = function（）{
/ *我们选择我们的#red元素* /
var red = document.getElementById red'）;
/ *将#red的宽度设置为0px * /
red.style.width =0px;
/ *创建一个每个50ms执行的动作* /
var animation = setInterval（function（）{
/ *如果元素在所需的宽度，我们清除动画循环* /
if（red.style.width ==91px）
clearInterval（animation）;
/ *否则，我们设置宽度+ = 1，确保只有它的数值* /
red.style.width = parseInt（red.style.width，10） +1 +px;
}，50）;
};
jQuery替代
$（'＃red'）。css（'width'，'0px'）;
$（'＃red'）。animate（{'width'：'91px'}，4500）;
JavaScript vs jQuery
在非正式测试电池后，为此目的的jQuery动画将比纯JavaScript对象运行慢85％。这是一个巨大的性能差异。
I was just wondering if it is possible to create a fill animation using CSS or javascript?
basically I want to create a fill animation like the one shown in the image bellow:
http://i40.tinypic.com/eit6ia.png
the red being the fill and the black is being empty.
This is my code that Jeff posted for images but it doesn't work for some reason! am i missing something??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#black{
position:absolute;
z-index:2;
color:black;
font-weight:bold;
font-size:2em;
width:768px;
}
#red {
position:absolute;
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
}
</style>
<script language="javascript">
var red = document.getElementById('red');
red.style.width = "0px";
red.style.height = "1024px";
var animation = setInterval(function(){
if(parseInt(red.style.width,10) == 768)
clearInterval(animation);
red.style.width = parseInt(red.style.width,10)+2 +"px";
},10);
</script>
</head>
<body>
<div><img id="black" src="http://www.ratemotorcycle.com/image1/5/53/kawasaki-ninja-zx10r-2013.jpg"/><img id="red" src="http://imageshack.us/a/img39/3517/13kawasakizx10r1.jpg"/></div>
</body>
</html>
解决方案
Here is a way in Pure JavaScript. I had fun with CSS styling.
Live Demo(with text)
Live Demo (with images)
Image animation
HTML
<div>
<img id="black" src="http://www.ratemotorcycle.com/image1/5/53/kawasaki-ninja-zx10r-2013.jpg" />
<img id="red" src="http://imageshack.us/a/img39/3517/13kawasakizx10r1.jpg" />
</div>
CSS
#black {
/* Added the position and the z-index to ensure images overlay correctly */
position:absolute;
z-index:2;
/* styling fun */
color:black;
font-weight:bold;
font-size:2em;
/* default width */
width:768px;
}
#red {
/* Position and z-index let us overlay the #black and #red elements*/
position:absolute;
z-index:10;
/* This is to put the element directly over the #black element
(compensating the margin/padding of the #black element */
left:8px;
/* We make the initial width 0px and hide the overflow. */
width:0px;
overflow:hidden;
/* Fun styling */
font-weight:bold;
font-size:2em;
color:red;
}
JavaScript
var red = document.getElementById('red');
red.style.width = "0px";
/* set the height so the image does not "scale" */
red.style.height = "1024px";
var animation = setInterval(function () {
if (parseInt(red.style.width, 10) == 768) clearInterval(animation);
red.style.width = parseInt(red.style.width, 10) + 2 + "px";
}, 10);
Text animation
HTML
<div>
<span id="black">LOGO</span>
<span id="red">LOGO</span>
</div>
CSS
#black{
/* Fun styling */
color:black;
font-weight:bold;
font-size:2em;
}
#red {
/* Position and z-index lets us overlay the #black and #red elements*/
position:absolute;
z-index:10;
/* This is to put the element directly over the #black element
(compensating the margin/padding of the #black element */
left:8px;
/* We make the initial width 0px and hide the overflow. */
width:0px;
overflow:hidden;
/* Fun styling */
font-weight:bold;
font-size:2em;
color:red;
}
JavaScript
/* On window load (when the page is loaded) */
window.onload = function(){
/* We select our #red element */
var red = document.getElementById('red');
/* Set the width of #red to 0px */
red.style.width = "0px";
/* Create an action that will execute every 50ms */
var animation = setInterval(function(){
/* If the element is at the desired width, we clear the animation loop */
if(red.style.width == "91px")
clearInterval(animation);
/* Otherwise, we set the width+=1, ensuring to get the numeric value of it only */
red.style.width = parseInt(red.style.width,10)+1 +"px";
},50);
};
jQuery alternative
$('#red').css('width','0px');
$('#red').animate({'width':'91px'},4500);
JavaScript vs jQuery
After an unofficial test battery, the jQuery animation for this purpose would be ran 85% slower than its pure JavaScript counterpart. This is a huge performance difference.
这篇关于使用CSS或Javascript填充动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![http：//i40.tinypic .com / eit6ia.png](\"http://i40.tinypic.com/eit6ia.png\"){kind=link}
