仿淘宝首页分类列表效果实现代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 仿淘宝首页分类列表效果实现代码

Javascript: QQ邮箱的一个文本编辑器代码; Z-Blog中用到的js代码; 绝对经典的滑轮新闻显示(javascript+css)实现; 用js实现的仿sohu博客更换页面风格（简单版）; 仿Vista进程条效果; 用Javascript判断图片是否存在，不存在则显示默认图片的代码; 用JQuery 实现的自定义对话框; jQuery使用手册之三 CSS操作; 利用Dojo和JSON建立无限级AJAX动态加载的功能模块树; 贴图转换+转贴工具用到的js代码超级推荐; 超级简单的图片防盗(HTML),好用; 现代 javscript 编程资料; 超级可爱纯js网页时钟; Dojo之路:如何利用Dojo实现Drag and Drop效果; AJAX架构之Dojo篇; 发两个小东西，ASP/PHP 学习工具。用JavaScript写的; 使用prototype.js 的时候应该特别注意的几个问题.; 一个已封装好的漂亮进度条; 漂亮的widgets，支持换肤和后期开发新皮肤; 用javascript实现的仿Flash广告图片轮换效果

No. « ‹ 203 204 205 206 › »

技术文章搜索

关键字

Javascript 中的仿淘宝首页分类列表效果实现代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 415 ::

收藏到网摘: n/a

javascript 层展开/关闭，带缓冲效果 javascript 像素拼图实现代码

模板淘宝首页的分类列表效果，17173的游戏分类效果也不错。

点击运行可以看到效果:

<!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>Untitled Document</title>
<style type="text/css">
body{font-size:12px;position:relative;font-family:Verdana, Geneva, sans-serif;}
a{color:blue;}
ul{margin:0;padding:0;list-style:none;}
#navigation{height:26px;}
#navigation li{float:left;}
#navigation li.show .content{display:block;}
#navigation li a,#navigation li span{display:inline-block;border:solid 1px #fff;border-bottom:none;height:26px;padding:0 6px;line-height:20px;overflow:hidden}
#navigation li a:hover,#navigation li.show a.index{background:#DBF3FE;border-color:#0a0;position:relative;top:0px;z-index:2;}
#container{position:relative;width:800px;margin:50px;}
#navigation li .content{position:absolute;left:0;top:26px;background:#DBF3FE;border:solid 1px #0a0;width:760px;padding:20px;display:none;}
#navigation li .content ul li{margin-right:10px;float:none;display:inline;}
#navigation li .content ul li a{border:none;}
#navigation li .content ul li{width:120px;}
#navigation li .content ul li h3{clear:both;text-align:left;}
</style>
</head>
<body>
<div id="container"> <ul id="navigation"> <li><span>拼音索引</span></li> <li> <a href="#" class="index">A</a> <div class="content"> <h3>阿里山</h3> <ul> <li><a href="#">阿里山</a></li> <li><a href="#">阿里山</a></li> <li><a href="#">阿里山</a></li> <li><a href="#">阿里山</a></li> <li><a href="#">阿里山</a></li> <li><a href="#">阿里山</a></li> </ul> <h3>阿里山</h3> <ul> <li><a href="#">阿里山</a></li> <li><a href="#">阿里山</a></li> <li><a href="#">阿里山</a></li> <li><a href="#">阿里山</a></li> </ul> </div> </li> <li> <a href="#" class="index">B</a> <div class="content"> <h3>棒棒糖</h3> <ul> <li><a href="#">棒棒糖</a></li> <li><a href="#">棒棒糖</a></li> <li><a href="#">棒棒糖</a></li> <li><a href="#">棒棒糖</a></li> <li><a href="#">棒棒糖</a></li> <li><a href="#">棒棒糖</a></li> </ul> <h3>棒棒糖</h3> <ul> <li><a href="#">棒棒糖</a></li> <li><a href="#">棒棒糖</a></li> <li><a href="#">棒棒糖</a></li> <li><a href="#">棒棒糖</a></li> </ul> </div> </li> <li><a href="#" class="index">C</a><div class="content">C</div></li> <li><a href="#" class="index">D</a><div class="content">D</div></li> <li><a href="#" class="index">E</a><div class="content">E</div></li> <li><a href="#" class="index">F</a><div class="content">F</div></li> <li><a href="#" class="index">G</a><div class="content">G</div></li> <li><a href="#" class="index">H</a><div class="content">H</div></li> <li><a href="#" class="index">I</a><div class="content">I</div></li> <li><a href="#" class="index">J</a><div class="content">J</div></li> <li><a href="#" class="index">K</a><div class="content">K</div></li> <li><a href="#" class="index">L</a><div class="content">L</div></li> <li><a href="#" class="index">M</a><div class="content">M</div></li> <li><a href="#" class="index">N</a><div class="content">N</div></li> <li><a href="#" class="index">O</a><div class="content">O</div></li> <li><a href="#" class="index">P</a><div class="content">P</div></li> <li><a href="#" class="index">Q</a><div class="content">Q</div></li> <li><a href="#" class="index">R</a><div class="content">R</div></li> <li><a href="#" class="index">S[sh]</a><div class="content">S</div></li> <li><a href="#" class="index">T</a><div class="content">T</div></li> <li><a href="#" class="index">U</a><div class="content">U</div></li> <li><a href="#" class="index">V</a><div class="content">V</div></li> <li><a href="#" class="index">W</a><div class="content">W</div></li> <li><a href="#" class="index">X</a><div class="content">X</div></li> <li><a href="#" class="index">Y</a><div class="content">Y</div></li> <li><a href="#" class="index">Z[zh]</a><div class="content">Z</div></li> </ul>
</div>
</body>
</html>
<script type="text/javascript">
function showAjaxContent(){ var obj=document.getElementById("navigation"); var liObj=obj.getElementsByTagName("li"); var length=liObj.length; var currentLiObj; for(var i=0;i<length;i++){ currentLiObj=liObj[i]; if(currentLiObj.parentNode!=obj){continue;} //然后循环添加事件 currentLiObj.onmouseover=function(){ if(this.className.indexOf("show")<0){ this.className+=" show"; } clearStyle(this); } currentLiObj.onmouseout=function(){ this.className=this.className.replace("show",""); clearStyle(this); } } function clearStyle(obj){ for(var i=0;i<length;i++){ currentLiObj=liObj[i]; if(obj!=currentLiObj){ currentLiObj.className=currentLiObj.className.replace("show",""); } } }
}
showAjaxContent();
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript 层展开/关闭，带缓冲效果 javascript 像素拼图实现代码

Javascript 中的 仿淘宝首页分类列表效果实现代码

评论 (0) All

Javascript 中的仿淘宝首页分类列表效果实现代码