首页 > 代码库 > js动画（三）
js动画（三）
咳咳咳咳，感冒了感冒了，鼻塞，蓝瘦啊！嘴巴也开裂，哎，心疼自己。想到这是第三只唇膏了！只怪，放荡不倔爱自由，
行驶在冷风路上么，北风那个吹啊吹啊吹啊，好了，发神经发完了，接下来进入正题，严肃脸。（字数150应该凑够了。）
js链式运动
代码如下 ：
<style>
#lia {
width: 200px;
height: 100px;
background: red;
opacity: 0.3;
}
</style>
<script>
window.onload = function() {
var qwe = document.getElementById("lia");
qwe.timer = null;
qwe.opacity=30;
/*以下，就是控制代码*/
qwe.onmouseover = function() {
onStart(qwe,"width",400,10,function(){/*这里控制，宽，目标值，速度，以及下一个动画*/
onStart(qwe,"height",300,10,function(){/*这里控制，长，目标值，速度，以及下一个动画*/
onStart(qwe,"opacity",100,10);/*这里控制，透明度，目标值，速度，以及下一个动画，当然以上顺序可以换*/
});
});
}
qwe.onmouseout = function() {/*这里不解释，跟上面一样*/
onStart(qwe,"opacity",30,-10,function(){
onStart(qwe,"height",100,-10,function(){
onStart(qwe,"width",200,-10);
});
});
}
}
function getStyle(obj, attr) { /*obj对象，就是你要搞哪个元素，attr属性，你要搞哪个的属性*/
if(obj.currentStyle) {
return obj.currentStyle[attr]; /*.currentStyle针对IE*/
} else {
return getComputedStyle(obj,false)[attr]; /* getComputedStyle针对firebox浏览器*/ }
}
/*这个呢，是昨天的彩蛋，挺好用的，具体的功能就是，取对象的样式属性值，很好用*/
function onStart(obj,attr, mu,speed,fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if(parseInt(getStyle(obj,"width")) == mu)
{
if(fn){
fn() /*这里就是，关键，就是执行下一个，函数的功能，我在这里创建一个空函数，
具体函数内容交给主函数来写，所以这个函数，再多传一个参数，来判断，
是否需要执行下一个函数*/
}
else{
clearInterval(obj.timer);
}
}
else if(parseInt(getStyle(obj,"height")) == mu)
{
if(fn){
fn()
}
else{
clearInterval(obj.timer);
}
}
else if(obj.opacity == mu){
clearInterval(obj.timer);
if(fn){
fn();
}
}
else{
if(attr == "opacity"){
obj.opacity+=speed;
obj.style.opacity = obj.opacity/100;
}
else if(attr == "width"){
obj.style.width = parseInt(getStyle(obj,"width"))+speed+"px";
}
else if(attr == "height"){
obj.style.height = parseInt(getStyle(obj,"height"))+speed+"px";
}
/*这里就是把三个功能给他合成在一个函数里，所以上述的fn(),执行的函数还是本身，只不过选择不同功能罢了
这里其实还可以优化，前面提到getStyle()，可以取到，对象的样式属性值，所以，可以把height和width整合起来。
*/
}
}, 30)
}
</script>
今天为什么把css的代码也放上来呢？
只是手误而已，嘿嘿嘿。若尝试有问题，对比css解决。
js动画（三）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。