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程序设计有所帮助。