<!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">*{font-size:12px;}#div1{width:200px; height:200px; border:1px solid green; background-color:#ccc; position:relative;}#son{width:200px; height:20px; border:1px solid blue; background-color:#bbb; position:absolute;}</style><script type="text/javascript">window.onload = function(){ var oDiv = document.getElementById('div1'); var oSpan = document.getElementById('son');
timer = null; oSpan.onmouseover = function() { startMove(); } oSpan.onmouseout = function() { stopMove(); } function startMove() { clearInterval(timer); timer = setInterval(function(){ if(oSpan.offsetHeight >= 200) { clearInterval(timer); } else { oSpan.style.height = oSpan.offsetHeight + 1 +'px'; } }, 30); } function stopMove() { clearInterval(timer); timer = setInterval(function(){ if(oSpan.offsetHeight <= 20) { clear(timer); } else { oSpan.style.height = oSpan.offsetHeight - 1 +'px';//当我把这里的1改成10问题不大,但是1就不行了,它会一直向下。 } }, 30); } }</script></head><body><div id="div1"> <span id="son"> <a>了不起的C语言!了不起的C语言!了不起的C语言!了不起的C语言!了不起的C语言!</a> </span></div></body></html>
哪位大神给解释下?
问题的关键就是offsetHeight属性,
用一个变量保存span的高度,通过变量值的变化来改变span的高度,如下:
window.onload = function () {你这个的确可行。我就是想知道我错在哪里。而且后面我想在合并代码时,将-1和1当参数传入。能再帮我看看么?sH--和sH++,如果不是加1减1呢?如果是5呢?
追答这个当然可行,我测试过了的,你错在不能用offsetHeight属性来加减,要用变量。
这个变量加1也好,5也好,都是可以的。
sH++直接换成sH +=n,反之亦然?
追答当然,你先试试啊。
追问我试过可以,但我还是纠结自己写的,用JQ倒是很容易的,我是想做这样的效果:
我想当鼠标移入时,文字会从上或下冒出来,鼠标移出,显示原图片。
问题就是offsetHeight属性的问题,改变style.height的时候offsetHeight似乎不是跟着变化的,而且offsetHeight还和浏览器有关系,存在兼容问题。
用jquery肯定好一点,里面有height()方法直接取高度。