javascript - js动画失效，js函数内部规定原始css可以运行，外部html中#div{}定义原始css不能运行-PHP中文网问答

2015.11.29 PM 5:47 修改更新
添加一段代码，改成用js规定#line2的css，最后直接onclick调用positionLine2()，就可以运行了。
但是我注释掉js中规定#line2的css的部分，然后再html中用css直接定义，就不行了
像下面这样：

p#line2 {
    color: #66ceff;
    position: absolute;
    top: 350px;
    left: 140px;
    font-size: 90px;
}

我觉得可能跟局部变量之类的有关系……但是并不清楚，只是js入门新手，希望知道原因的大神能指点一下

2015.11.29 PM 4:41 修改更新
谢谢各位的帮助~~新手捂脸感谢
代码根据各位前辈的指点改过一遍了，修改部分在上面备注指出，但是还是不行，这些代码的主要功能就是两行文字在点击按钮之后移动，但就是实现不了，继续求挑问题。

另外，还有一点别的疑惑，为什么repeat要这样用字符串的方式写

var repeat = "moveAE('" + elementid + "'," + xfi + "," + yfi + "," + intime + ")"

而不能直接向下面这样呢？

var repeat = moveAE(elementid, xfi, yfi, intime)

原始代码：





    
    hey




    Hello,John.
    削了个椰子，你却给个梨
    
        move

各种失效，代码是照着《javascript DOM编程艺术》写的，查了一遍感觉没错，有大神能看出来问题吗

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hey</title> </head> <style type="text/css"> p#line1 { color: transparent; -webkit-text-stroke: 1px #66ceff; position: absolute; top: 350px; left: 140px; font-size: 90px; } p#line2 { color: #66ceff; position: absolute; top: 350px; left: 140px; font-size: 90px; } #botton { background-color:transparent; border: 1px #66ceff solid; position: absolute; top: 250px; left: 520px; font-size: 30px; color:#66ceff; width:150px; height:46px; line-height:40px; text-align:center; } /*#botton :hover{ 错误*/ #botton :hover{ background-color:#66ceff; color:#ffffff; } </style> <body> <p id="line1">Hello,John.</p> <p id="line2">削了个椰子，你却给个梨</p> <p id="botton"> move </p> </body> <script type="text/javascript"> /*function moveAE("elementid", xfi, yfi, intime) { 错误*/ var movement; function moveAE(elementid, xfi, yfi, intime) { if (!document.getElementById(elementid)) return false; var elem = document.getElementById(elementid); var computedstyle=getComputedStyle(elem); var xnow = parseInt(computedstyle.left)||0; var ynow = parseInt(computedstyle.top)||0; console.log(xnow); /*if (xnow = xfi && ynow = yfi) return false 错误*/ //console.log(elem.style); function animation(){ if (xnow == xfi && ynow == yfi) return; if (xnow < xfi) { xnow++; } if (xnow > xfi) { xnow--; } if (ynow < yfi) { ynow++; } if (ynow > yfi) { ynow--; } elem.style.left = xnow + "px"; elem.style.top = ynow + "px"; movement = setTimeout(function(){ animation(); }, intime); } animation(); } var bott = document.getElementById("botton") bott.addEventListener("click", function() { moveAE('line1', 350, 250, 10); //moveAE('line2', 350, 350, 10); }) </script> </html>

全部回复(6)

高洛峰2017-04-10 16:25:27 6楼

1) 基本上每个JS语句后的；都缺失
2) moveAE在事件回调中为什么调用2次，目的是什么？
3) 通过getComputedStyle来获取通过CSS添加的样式最终值
4) parseInt(elm.style.left)可能获取结果NaN，所以要parseInt(elm.style.left)||0来保护操作
5)setTimeout/setInterval要避免出入字符串形式的函数，因其最终是通过eval函数调用，而eval函数是不推荐使用的

赞 +0

添加回复

高洛峰2017-04-10 16:25:27 5楼

js代码里的函数声明应该放在你button按钮绑定这个函数之前吧，你绑定函数的时候，这个函数都不存在，自然没有效果。

比较好的做法是，在js函数声明之后，用js给按钮绑定onclick事件

伊谢尔伦2017-04-10 16:25:27 4楼

moveae第一个参数什么鬼啊？语法都不对

伊谢尔伦2017-04-10 16:25:27 3楼

html页面内嵌的script标签一般放在</body>之前，虽然js语法讲语句尾加不加分号都可以但是如果以后准备正经写这个还是加上吧，楼上说的第一个参数的问题，赋值操作符什么的明显是基础不牢啊少年，另外你把你想要干什么说清楚大家才好对症下药啊

伊谢尔伦2017-04-10 16:25:27 2楼

首先

 <p id="botton" onclick="moveAE("line1", 350, 250, 10)">
        move
    </p>

"line1"这里用单引号，即：'line1'

然后

#botton :hover{
    background-color:#66ceff;
    color:#ffffff;
}

//这里失效

//这里失效 这一行去掉，或者换成/*这里失效*/
*css里面没有//的注释

最后
#botton :hover
中间不能有空格

PHP中文网2017-04-10 16:25:27 1楼

button:hover