jQuery简单实现仿京东分类导航层效果
本文实例讲述了jQuery简单实现仿京东分类导航层效果。分享给大家供大家参考，具体如下：
<scriptsrc="jquery-1.11.1.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
varalink01=$(".item>ul");
alink01.hover(function(){
//alertdiv
vardivId=$(this).find("div").attr("id");
vardiv=$("#"+divId);//要浮动在这个元素旁边的层
div.css("position","absolute");//让这个层可以绝对定位
varself=$(this);//当前对象
div.css("display","block");
varp=self.position();//获取这个元素的left和top
varx=p.left+self.width();//获取这个浮动层的left
div.css("left",x+45);//20140916修改
div.css("top",p.top);
div.show();
//mouseenter
$(this).removeClass("unfocus").addClass("focus");
},
function(){
vardivId=$(this).find("div").attr("id");
vardiv=$("#"+divId);//要浮动在这个元素旁边的层
div.css("display","none");
//mouseleave
$(this).removeClass("focus").addClass("unfocus");
});
});
</script>
<divclass="leftbody"> <divclass="item"> <span>全部分类</span> <ulclass="focus"> <li><strong>php</strong><br/> php基本语法php实例 </li> </ul> <ulclass="unfocus"> <li><strong>java</strong><br/> java语法java面向对象 </li> </ul> <ulclass="unfocus"> <li><strong>Python</strong><br/> Python语法Python图形处理 </li> </ul> <ulclass="unfocus"> <li><strong>javascript</strong><br/> javascript幻灯片javascript网页特效 </li> </ul> <ulclass="unfocus"> <li><strong>C#</strong><br/> C#桌面应用程序C#网络程序 </li> </ul> <ulclass="unfocus"> <li><strong>VC++</strong><br/> VC++系统程序开发VC++网络程序 </li> </ul> <ulclass="unfocus"> <li><strong>Delphi</strong><br/> Delphi桌面程序Delphi游戏开发 </li> </ul> </div> </div>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。