发布于 2017-02-26 12:25:43 | 190 次阅读 | 评论: 0 | 来源: 网友投递
jQuery javascript框架
jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。
本文实例讲述了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 div
var 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和top
var x = 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 () {
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程序设计有所帮助。