mootools实例：highlight实现渐变效果

醒目（highlight）是一个目标非常明确（也极其有用）的渐变快捷方法，它提供了两个功能：
1. 使用它来平滑变化到一种不同的背景色
2. 直接设置一个不同的背景色，然后平滑变化到另外一个背景色

实例如下：

<style type="text/css">
body{ font-size:12px; }
ul { margin:0px; padding:0px;  list-style-type:none;}
#showli2 li{ width:480px; border-bottom:1px solid #CCC; height:30px; line-height:30px; cursor:pointer; padding-left:20px; }
</style>
<script type="text/javascript" src="http://www.aspbc.com/js/mootools.js"></script>
<script type="text/javascript">
//当页面加载完后
window.addEvent('domready',function(){
   $$("#showli2 li").addEvent('mouseover',function(item){
      item.target.highlight('#A2C7E1', '#2977A8');		
   });
});
</script>
<ul id="showli2">		
    <li class="a" id="a1">a</li>
    <li class="a" id="a2">b</li>
    <li class="a" id="a3">c</li>
    <li class="a" id="a4">d</li>
    <li class="a" id="a5">e</li>   
	<li class="a" id="a6">f</li>  
	<li class="a" id="a7">g</li>  
	<li class="a" id="a8">h</li>  
	<li class="a" id="a9">i</li>  
</ul>

(鼠标移到代码上去，在代码的顶部会出现四个图标，第一个是查看源代码，第二个是复制代码，第三个是打印代码，第四个是帮助)
这里的主要知识点：item.target.highlight('#A2C7E1', '#2977A8');这里面可以填写任意两种颜色。
其他的知识点同前面的例子，这里就不在一一例举了。

原创文章，转载请注明来源“asp编程网（www.aspbc.com）”，谢谢。