《锋利的JS》之 多行文本框高度变化

这是《锋利的JQ》里第五章的第二个实例，主要知识点是涉及到动画，动画在前面的博文里已有提到，所以这一个实例就放代码，不解释，详情请移步：《锋利的JS》之 轮播效果和动画。

结构代码：

<!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; font: normal 12px/17px Arial;}
    .msg{ width:300px; margin:100px;}
    .msg_caption{ width:100%;overflow:hidden; margin-bottom:1px;}
    .msg_caption span{ display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer; color:white;}
    .msg textarea{ width:300px; height:100px; border:1px solid #000;}
</style>
</head>
<body>
    <form action="" method="post">
        <div class="msg">
            <div class="msg_caption">
                <span class="bigger">放大</span>
                <span class="smaller">缩小</span>
            </div>
            <div>
                <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>
            </div>
        </div>
    </form>
</body>
</html>

JQ代码：

$(function(){
    var $comment = $("#comment");
    $(".bigger").click(function(){
        if(!$comment.is(":animated")){
            if($comment.height() < 500){
                $comment.animate({ height : "+=50"},400);
            }
        } 
    });
    $(".smaller").click(function(){
        if(!$comment.is(":animated")){
            if($comment.height() > 50){
                $comment.animate({ height : "-=50"},400);
            }
        }
    });
})

我仿写的JS代码：

window.onload = function(){
    var bigger = getElementsByClassName("bigger")[0];
    var smaller = getElementsByClassName("smaller")[0];
    var comment = document.getElementById("comment");
    var t;

    bigger.onclick = function(){
        if(t) clearInterval(t);
        if(comment.offsetHeight < 500){
            t = animate(comment,{height:comment.offsetHeight},{height:50},400,Quad);
        }
    }
    smaller.onclick = function(){
        if(t) clearInterval(t);
        if(comment.offsetHeight > 50){
            t = animate(comment,{height:comment.offsetHeight},{height: -50},400,Quad);
        }
    }
}

function animate(obj,start,alter,dur,fx){
   var curTime = 0;
   var interval = setInterval(function(){
       if(curTime >= dur){
           clearInterval(interval);
       }
       for(var i in start){
           obj.style[i] = fx(start[i],alter[i],curTime,dur) + "px";
       }
       curTime += 50;
   },50);
   return interval;
}

function Quad(start,alter,curTime,dur){
  return start+Math.pow(curTime/dur,2)*alter;
}

function getElementsByClassName(className,node){
    node = node || document;
    if(node.getElementsByClassName){
        return node.getElementsByClassName(className);
    }
    var eles = node.getElementsByTagName('*');
    var reg = [];
    for(var i = 0,l = eles.length; i < l; i++){
        if(hasClass(className,eles[i])){
            reg.push(eles[i]);
        }
    }
    return reg;
}

function hasClass(className,node){
    var eles = node.className.split(/\s+/);
    for(var i = 0,l = eles.length; i < l; i++){
        if(eles[i] == className){
            return true;
        }
    }
    return false;
}

最终运行效果：

posted @ 2011-05-11 16:46  肥杜  阅读(684)  评论(0)    收藏  举报