当前位置:asp编程网>技术教程>Javascript教程>  正文

mootools实例:highlight实现渐变效果

1970-01-01 08:00:00   来源:www.aspbc.com    作者:wangsdong   浏览量:2307   收藏

醒目(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)”,谢谢。

 

 



关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网