能帮我看一下代码吗，我就是将老师最后讲完的完美框架想课后再试一试链式动画和多物体动画，发现都会出现问题啊
小喜蛋
2014-11-26 21:49
问题1
如题，不能鼠标移入一次就可以先宽再高再透明度，而是需要分别移入三次，谁能帮我看一下啊，痛苦了好久，谢谢拉！！！
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
#div1{
margin-bottom:10px;
width: 100px;
height:100px;
background: yellow;
border: 5px solid #000;
opacity: 0.3;
border-radius: 10px;
}
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById("div1");
odiv.onmouseover=function(){
startmove(odiv,{width:200},function(){
startmove(odiv,{height:200},function(){
startmove(odiv,{opacity:100});
});
});
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
问题2
同一个文件中，我又写了以下代码，还是发现有问题，这是怎么回事呢
var obj1=document.getElementById("obj1");
var oli=document.getElementsByTagName('li');
for (var i = 0; i < oli.length; i++) {
oli[i].onmouseover=function(){
startmove(this,{width:400});
}
}
5回答
-
- 快乐的小牛妞
- 2014-11-28 15:13:13
第一个问题，你看你的标杆设置在什么地方了？一进来就假定所有的运动都到达了目标值，那肯定你执行一次就停止了。应该是在启动定时器之后设置。
-
- 快乐的小牛妞
- 2014-11-28 15:00:08
你的这个代码报这个错Uncaught SyntaxError: Unexpected end of input是你代码写的不规范，其中的某条语句，没有正常结束或者部分语句“‘’”双引号，单引号没有配对好，被转义了之类的错误造成的
看到红色的{}了吗，你少了结尾的},好好对比一下你的代码就会知道。
ps:今后再遇到类似的错误，如果不知道什么意思，可以百度一下。。
谢谢。
-
- 小喜蛋
- 2014-11-27 18:52:08
老师，想同时控制一个ul中的li动画，我还是出错的，代码如下图，您能帮忙看一下吗，这次调试的结果截图也附上来，我检查了半天没有查出来不规范的地方。。。自己是一名新手，希望老师您可以抽空看一下，谢谢老师
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>!!!final-test</title> <style type="text/css"> body{ margin:10px; padding:0px; background: #eee; } ul{ list-style: none; margin:0px; padding: 0px; } li{ margin:0px 10px 10px 0px; } #obj1 li{ width: 200px; height: 100px; background: blue; border: 5px solid #000; opacity:0.3; border-radius: 10px; } </style> <script type="text/javascript" src="move.js"></script> <script type="text/javascript"> window.onload=function(){ var obj1=document.getElementById("obj1"); var oli=document.getElementsByTagName('li'); for (var i = 0; i < oli.length; i++) { oli[i].onmouseover=function(){ startmove(this,{width:400}); }; } </script> </head> <body> <ul id="obj1"> <li></li> <li></li> <li></li> </ul> </body> </html>
-
- 小喜蛋
- 2014-11-27 18:32:55
//获取样式函数,如果是在内联样式中，可以直接通过style属性获取样式，但是如果是在外部定义的css，则需要getstyle获取样式的属性 function getstyle(obj,attr){ //针对ie浏览器 if(obj.currentStyle){ return obj.currentStyle[attr]; } //针对firefox以及chrome浏览器 else{ return getComputedStyle(obj,false)[attr]; } } //startmove(obj,{attr1:itarget1, attr2:itarget2},fn) //json可方便调用多个属性样式，可以同时做多个动画 function startmove(obj,json,fn){ var flag=true;//设立一个标杆，假设所有的运动都到达了目标值 clearInterval(obj.timer);//为了防止控制多个物体时出现错误，将timer指定为各自的对象 //开启定时器 obj.timer=setInterval(function(){ //遍历json的属性 for(var attr in json){ //取当前的值 var icur=0; if (attr=='opacity') { icur=Math.round(parseFloat(getstyle(obj,attr))*100); //getstyle()只是获取了样式属性，但只是一个字符串，不能直接参与运算，所以需要将其变为parsefloat解析为小数，为避免小数运算产生的错误，要将其四舍五入，同时先乘以100，最后再除以100得到结果 } else{ icur=parseInt(getstyle(obj,attr)); } //算速度 //itarget换为json[attr],是哪个属性，就换为json哪个属性的目标值 var speed=(json[attr]-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //检测停止 if (icur!=json[attr]) { flag=false; } if (attr=='opacity') { obj.style.opacity=(icur+speed)/100; } else{ obj.style[attr]=icur+speed+'px'; } //这一种和上一行的写法都是ok的 }//针对的是json的函数遍历 if (flag) { clearInterval(obj.timer); if(fn){ fn(); } }; },30) }我把您的这段代码试过了还是移入一次一个属性变化一次。F12调试的时候也没有报错，这是我的move.js部分，老师您能抽空看一下吗
-
- 快乐的小牛妞
- 2014-11-27 09:58:06
<!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>Document</title> <style type="text/css"> #div1{ margin-bottom:10px; width: 100px; height:100px; background: yellow; border: 5px solid #000; opacity: 0.3; border-radius: 10px; } </style> <script src="js/move.js"></script> <script type="text/javascript"> window.onload=function(){ var odiv=document.getElementById("div1"); odiv.onmouseover=function(){ startMove(odiv,{width:200},function(){ startMove(odiv,{height:200},function(){ startMove(odiv,{opacity:100}); }); }); } } </script> </head> <body> <div id="div1"></div> </body> </html>按照你的代码，我运行了一遍，没有问题，是先变宽再变高，最后变透明的。。只需鼠标移入一次。。你按F12查看一下是否报错，报什么错，有什么提示。。
JS动画效果
113925 学习 · 1443 问题
相似问题