网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

js隔行、指向变色闭包使用实例

关注我吧
 2012/12/5 18:52:50 阅读次数:3545

本实例主要用js的方法对li进行绑定事件,从而实现隔行换色,鼠标变色也好做,但是你如果是移出你就会发现问题了,因为是遍历的,所以还需要判断奇偶行,所以必须使用闭包的方法进行传值。
本人觉得JQ再强一段小代码没必要加载那么大个 js文件。如果大家觉得还有什么更好的方法可以给我留言探讨
效果图下图所示

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>
<script type="text/javascript">
//chagec("表格名称","奇数行背景","偶数行背景",”经过时的颜色“);
function chagec(o,a,b,c){
 var t=document.getElementById(o).getElementsByTagName("li");
 for(var i=0;i<t.length;i++){
 	if(i%2==0)
	{
		t[i].style.background=b;
	}
	else
	{
		t[i].style.background=a;
	}
	t[i].onmouseover=function adds(){
		this.style.background=c;			
	}
    //闭调用包
	t[i].onmouseout=(function adds(i){
		return function(){
			this.style.background=(i%2==0)?b:a;
		}					
	})(i);
 }
}
</script>
<style>ul{width:500px;margin:0 auto;padding:0;}li{list-style:none;height:30px;line-height:30px;padding-left:15px;border-bottom:1px dotted #ccc;font-size:12px;}a{color:#000;}</style>
</head>
<body>
<ul id="listd">
  <li><a title="C#.net文件批量上传解决方案附下载(swfupload)" href="http://www.ok22.org/art_detail.aspx?id=232">C#.net文件批量上传解决方案附下载(sw...</a></li>
  <li><a title="kindeditor/ckeditor编辑器加+图片自动上传成功" href="http://www.ok22.org/art_detail.aspx?id=113">kindeditor/ckeditor编辑器加+图片自动...</a></li>
  <li><a title="前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态" href="http://www.ok22.org/art_detail.aspx?id=118">前端设计js+Tab切换可关闭+添加并自动...</a></li>
  <li><a title="js文字上下滚动+左右滚动兼容FF/IE" href="http://www.ok22.org/art_detail.aspx?id=114">js文字上下滚动+左右滚动兼容FF/IE</a></li>
  <li><a title="js给C#控件赋值" href="http://www.ok22.org/art_detail.aspx?id=75">js给C#控件赋值</a></li>
  <li><a title="ckeditor编辑器+finder配置上传功能" href="http://www.ok22.org/art_detail.aspx?id=134">ckeditor编辑器+finder配置上传功能</a></li>
  <li><a title="JS读取XML并显示各节点[兼容IE/FF/Chrome,Safari]" href="http://www.ok22.org/art_detail.aspx?id=137">JS读取XML并显示各节点[兼容IE/FF/Chr...</a></li>
  <li><a title="iframe里面的页面调用父窗口,左右窗口js函数的方法" href="http://www.ok22.org/art_detail.aspx?id=87">iframe里面的页面调用父窗口,左右窗口...</a></li>
  <li><a title="如何引导用户评论(用户检验)" href="http://www.ok22.org/art_detail.aspx?id=17">如何引导用户评论(用户检验)</a></li>
  <li><a title="我收藏的教程及工具 " href="http://www.ok22.org/art_detail.aspx?id=109">我收藏的教程及工具</a></li>
</ul>
<script>
//chagec("表格名称","奇数行背景","偶数行背景","经过时的颜色");
chagec("listd","#eee","#fff","#fffaaa");
</script>
</body>
</html>

搞定!


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭