如何通过html+css+js实现，缩放元素大小的功能？

http://www.familyecho.com/

例如这个网站，我可以点击+，来放大元素，这个原理是什么？

也是通过js去修改元素的大小吗？

我写了一种简单的实现方式
图片说明
图片说明

css写两套样式完了，js控制引用，点击+的时候引用样式一，点击-的时候引用样式二，样式一写个大样式，样式二写个小样式，不完了么。

就是简单的width/height操作而已，absolute定位，还需要调整left、top进行居中，如果不考虑居中直接调整width/height就行了

 <!doctype html>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<style>
    #me{position:absolute;left:50%;top:50%;width:50px;height:30px;border:solid 1px #000;margin-left:-25px;margin-top:-15px;text-align:center;line-height:30px;font-size:14px}
</style>
<div id="me">me</div>
<input type="button" value="+" /><input type="button" value="-" />
<script>
    var w = 50, h = 30,ft=14;
    $(':button').click(function () {
        var plus = this.value == '+';
        w += plus ? 20 : -20;
        h += plus ? 10 : -10;
        ft += plus ? 2 : -2;
        var ml = w / 2, mt = h / 2;
        $('#me').css({ width: w + 'px', height: h + 'px', marginLeft: -ml + 'px', marginTop: -mt + 'px', lineHeight: h + 'px', fontSize: ft + 'px' });
    });
</script>