很简单的一个应用，实现方式当然也是多种多样，最直接的，通过<img>的src属性，但我想这是最废材的方法了，这样一个效果，你至少需要两张图片，然后是更多的DOM操作，你还要面对图片下载延迟的问题。还有啥性能（1，2）可言？

于是我写了以下的实现方式（DEMO）：

function star(id){
	var star = $(id);
	var stars = $(id).getElementsByTagName("li");
	for(var i=0; i<stars.length; i++){
		stars[i].starNum = i+1;
		stars[i].onmouseover = function(){
			star.star = this.starNum;
			star.style.backgroundPosition = 'left '+(-parseInt(this.starNum)*30)+'px';
		}
		stars[i].onclick = function(){
			alert(star.star);
		}
	}
	star.onmouseout = function(){
		star.star = 0;
		this.style.backgroundPosition = 'left top';
	}
}
function $(id){return document.getElementById(id);}

当然要依据特定的DOM，这种方式通过改变背景图片的位置来实现，看起来似乎已经很完美了，可惜这只是较之于src的实现方法而言。

再看一个TZ的改进的版本（DEMO）：

    function $(element){
      return document.getElementById(element) ;
    }
    var obj = $('outter').getElementsByTagName("li") ;
    for (var i=0,k;k=obj[i];i++ ) {
      k.no = i ;
      k.onmouseover = function () {
        for (var i=0;i<=this.no;i++ ) {
          obj[i].style.backgroundPosition = 'left -30px' ;
        }
      }
      k.onmouseout = function () {
        for (var i=0;i<=this.no;i++ ) {
          obj[i].style.backgroundPosition = 'left top' ;
        }
      }
    }

很显然，这个写法比我的又更优化了一些。虽然都是通过改变背景图片的坐标来实现，但是，我使用了一个30K的jpg图片，TZ使用的却是一个只有599B的gif图片，但即使不使用gif，他的图片也会比我的小很多，大概是15倍左右～···，因为具体的实现方式决定了。虽然他的方法增加了更多的DOM操作，但是最大限度地优化网络传输方面的性能，总体性能是最佳的！

只有一个感概：只要有可能，就要最大限度的减少页面下载量，就要最大限度的提升代码性能！

© omiga for omiga, 2009. | Permalink | 5 comments | Add to del.icio.us
Post tags: javascript, ratestar, 性能