代码是照着写的啊，但是透明度不能变到100，onmouseout的动画也不对，亲可以帮我看下吗？谢谢啦！
来源：6-1 同时运动
饭粒宝宝
2015-11-26 18:48
<style type="text/css">
*{
margin:0;
padding:0;}
ul,li{
list-style:none;}
ul li{
width:200px;
height:100px;
background:yellow;
margin-bottom:20px;
border:4px solid #000;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var Li=document.getElementById('li1');
Li.onmouseover=function(){
startMove(Li,'width',400,function(){
startMove(Li,'height',200,function(){
startMove(Li,'opacity',100);
});
});
}
Li.onmouseout=function(){
startMove(Li,'opacity',30,function(){
startMove(Li,'height',100,function(){
startMove(Li,'width',200);
});
});
}
}
</script>
move.js
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
//var timer=null;
function startMove(obj,attr,iTarget,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//1.取当前的值
var icur=0;
if(icur=='opacity'){
icur=Math.round(parseFloat(getStyle(obj.attr))*100);
}
else{
icur=parseInt(getStyle(obj,attr));
}
//2.算速度
var speed=(iTarget-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//3.检测停止
if(iTarget==icur){
clearInterval(obj.timer);
if(fn){
fn();
}
}
else{
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}
else{
obj.style[attr]=icur+speed+'px';
}
}
},30)
}
写回答
关注
2回答
-
- 李晓健
- 2015-11-26 20:17:13
html 呢？
-
- 李晓健
- 2015-11-26 22:26:50
<!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>三列布局</title> <style type="text/css"> * { margin: 0; padding: 0; } ul, li { list-style: none; } ul li { width: 200px; height: 100px; background: yellow; margin-bottom: 20px; border: 4px solid #000; filter: alpha(opacity:30); opacity: 0.3; } </style> <script> function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } //var timer=null; function startMove(obj, attr, iTarget, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { //1.取当前的值 var icur = 0; if (attr == 'opacity') {//看这里 icur = Math.round(parseFloat(getStyle(obj,attr)) * 100); //看这里 }else { icur = parseInt(getStyle(obj, attr)); } //2.算速度 var speed = (iTarget - icur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //3.检测停止 if (iTarget == icur) { clearInterval(obj.timer); if (fn) { fn(); } }else { if (attr == 'opacity') { obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')'; obj.style.opacity = (icur + speed) / 100; console.log(obj.style.opacity); }else { obj.style[attr] = icur + speed + 'px'; } } }, 30) }; window.onload = function () { var Li = document.getElementById('li1'); Li.onmouseover = function () { startMove(Li, 'width', 400, function () { startMove(Li, 'height', 200, function () { startMove(Li, 'opacity', 100); }); }); } Li.onmouseout = function () { startMove(Li, 'opacity', 30, function () { startMove(Li, 'height', 100, function () { startMove(Li, 'width', 200); }); }); } } </script> </head> <body> <ul> <li id="li1"></li> </ul> </body> </html>修改后的代码 ，自己对应着看。
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113924 学习 · 1443 问题
相似问题