jQuery简单实现仿京东分类导航层效果

本文实例讲述了jQuery简单实现仿京东分类导航层效果。分享给大家供大家参考，具体如下：

<script src="jquery-1.11.1.min.js" type="text/javascript"></script><script type="text/javascript">$（function （） {var alink01 = $（".item > ul"）;alink01.hover（function （） {//alert divvar divId = $（this）.find（"div"）.attr（"id"）;var div = $（"#" + divId）; //要浮动在这个元素旁边的层div.css（"position", "absolute"）; //让这个层可以绝对定位var self = $（this）; //当前对象div.css（"display", "block"）;var p = self.position（）; //获取这个元素的left和topvar x = p.left + self.width（）; //获取这个浮动层的leftdiv.css（"left", x + 45）; //20140916修改div.css（"top", p.top）;div.show（）;//mouseenter$（this）.removeClass（"unfocus"）.addClass（"focus"）;},function （） {var divId = $（this）.find（"div"）.attr（"id"）;var div = $（"#" + divId）; //要浮动在这个元素旁边的层div.css（"display", "none"）;//mouseleave$（this）.removeClass（"focus"）.addClass（"unfocus"）;}）;}）;</script>

<div class="leftbody"><div class="item"><span>全部分类</span><ul class="focus"><li ><strong>php</strong> <br />php基本语法 php实例</li></ul><ul class="unfocus"><li ><strong>java</strong> <br />java语法 java面向对象</li></ul><ul class="unfocus"><li ><strong>Python</strong> <br />Python语法 Python图形处理</li></ul><ul class="unfocus"><li ><strong>javascript</strong> <br />javascript幻灯片 javascript网页特效</li></ul><ul class="unfocus"><li ><strong>C#</strong> <br />C#桌面应用程序 C#网络程序</li></ul><ul class="unfocus"><li ><strong>VC++</strong> <br />VC++系统程序开发 VC++网络程序</li></ul><ul class="unfocus"><li ><strong>Delphi</strong> <br />Delphi桌面程序 Delphi游戏开发</li></ul></div></div>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格（table）操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。