仿校内新鲜事关闭效果

Artcss — Tue, 13 Oct 2009 05:22:23 +0000

校内网在当今大学生中一定都不陌生，我也是校内网的忠实用户。虽然我比较懒，在里边不太活跃，但感觉校内的许多细节做的还是挺人性化的。

今天就做一个“仿校内新鲜事”效果，主要是可以即时删除自己不想看的新鲜事。这里用两种方法实现，

先上效果图：

方法一：

主要用到的Js代码主要是

1	removeChild(this.parentNode);

点击下边运行看效果

<!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" /> <meta name="author" content="artskin@163.com,guliqiang" /> <meta name="Keywords" content="前端思考" /> <meta content="all" name="robots" /> <title>仿校内新鲜事效果|| 前端思考</title> <style type="text/css"> *{margin:0;padding:0;} body{padding:20px;} h4{height:26px;font-size:14px;} p.author,p.author a{width:400px;text-align:right;font-size:12px;color:#999;} #news{width:400px;padding-bottom:10px;font-size:14px;} #news a{color:#005EAC;text-decoration:none;margin:0 3px;} #news a:hover{text-decoration:underline;} #news li{ list-style:none;color:222px;border-bottom:1px solid #e3eef8;margin-top:10px; line-height:150% } #news span a{display:block;width:13px;height:14px;overflow:hidden;background:url(wp-content/uploads/test/img/btn.gif) no-repeat scroll -63px -420px;float:right;cursor:pointer} #news span a:hover{background:url(wp-content/uploads/test/img/btn.gif) no-repeat scroll -63px -435px;} em{display:block;float:left;width:16px;height:16px;margin-right:5px;background:url(wp-content/uploads/test/img/apptop100.png)} em.share{background-position:0 -64px;} em.photo{background-position:0 0;} em.msg{background-position:0 -351px;} em.vote{background-position:0 -126px;} em.game{background-position:0 -223px;} </style> <script type="text/javascript"> function news(id){ var oNews = document.getElementById(id) var spanList = oNews.getElementsByTagName("span"); for (var i=0,j=spanList.length;i<j;i++){ spanList[i].onclick = function(){ this.parentNode.parentNode.removeChild(this.parentNode); } } } window.onload = function(){ news("news") } </script> </head> <body> <h4>校内新鲜事</h4> <ul id="news"> <li><em class="msg"></em><span><a href="javascript:void(0);"></a></span><a href="#">js小强</a>更新状态<a href="#">终于熬到放假啦！</a></li> <li><em class="share"></em><span><a href="javascript:void(0);"></a></span><a href="#">artskin</a>分享<a href="#">大学生必做的10件事！</a></li> <li><em class="photo"></em><span><a href="javascript:void(0);"></a></span><a href="#">小谷哥哥</a>上传5张照片至<a href="#">Google年会</a></li> <li><em class="vote"></em><span><a href="javascript:void(0);"></a></span><a href="#">蓝色理想</a>发起投票<a href="#">买不起房子就不能结婚了吗？</a></li> <li><em class="game"></em><span><a href="javascript:void(0);"></a></span>你的好友<a href="#">喜洋洋</a>邀请你安装<a href="#">德克萨斯扑克牌</a></li> </ul> <p class="author">[ made by:<a href="http://www.artskin.cn/blog">前端思考</a> ]</p> </body> </html>

提示：你可以先修改部分代码再运行。

方法二：

主要用到的Js代码主要是

Download script.js

1	this.parentNode.style.display = "none";

点击下边运行看效果

<!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" /> <meta name="author" content="artskin@163.com,guliqiang" /> <meta name="Keywords" content="前端思考" /> <meta content="all" name="robots" /> <title>仿校内新鲜事效果|| 前端思考</title> <style type="text/css"> *{margin:0;padding:0;} body{padding:20px;} h4{height:26px;font-size:14px;} p.author,p.author a{width:400px;text-align:right;font-size:12px;color:#999;} #news{width:400px;padding-bottom:10px;font-size:14px;} #news a{color:#005EAC;text-decoration:none;margin:0 3px;} #news a:hover{text-decoration:underline;} #news li{ list-style:none;color:222px;border-bottom:1px solid #e3eef8;margin-top:10px; line-height:150% } #news span a{display:block;width:13px;height:14px;overflow:hidden;background:url(wp-content/uploads/test/img/btn.gif) no-repeat scroll -63px -420px;float:right;cursor:pointer} #news span a:hover{background:url(wp-content/uploads/test/img/btn.gif) no-repeat scroll -63px -435px;} em{display:block;float:left;width:16px;height:16px;margin-right:5px;background:url(wp-content/uploads/test/img/apptop100.png)} em.share{background-position:0 -64px;} em.photo{background-position:0 0;} em.msg{background-position:0 -351px;} em.vote{background-position:0 -126px;} em.game{background-position:0 -223px;} </style> <script type="text/javascript"> function news(id){ var oNews = document.getElementById(id) var spanList = oNews.getElementsByTagName("span"); for (var i=0,j=spanList.length;i<j;i++){ spanList[i].onclick = function(){ this.parentNode.style.display = "none"; } } } window.onload = function(){ news("news") } </script> </head> <body> <h4>校内新鲜事</h4> <ul id="news"> <li><em class="msg"></em><span><a href="javascript:void(0);"></a></span><a href="#">js小强</a>更新状态<a href="#">终于熬到放假啦！</a></li> <li><em class="share"></em><span><a href="javascript:void(0);"></a></span><a href="#">artskin</a>分享<a href="#">大学生必做的10件事！</a></li> <li><em class="photo"></em><span><a href="javascript:void(0);"></a></span><a href="#">小谷哥哥</a>上传5张照片至<a href="#">Google年会</a></li> <li><em class="vote"></em><span><a href="javascript:void(0);"></a></span><a href="#">蓝色理想</a>发起投票<a href="#">买不起房子就不能结婚了吗？</a></li> <li><em class="game"></em><span><a href="javascript:void(0);"></a></span>你的好友<a href="#">喜洋洋</a>邀请你安装<a href="#">德克萨斯扑克牌</a></li> </ul> <p class="author">[ made by:<a href="http://www.artskin.cn/blog">前端思考</a> ]</p> </body> </html>

提示：你可以先修改部分代码再运行。

至于这两种方法之间各有什么优劣我不是很清楚，望高手指点迷津……

前端思考：专注前端开发，关注用户体验 » 新鲜事

仿校内新鲜事关闭效果

方法一：

方法二：