发布于 2016-10-18 12:47:20 | 208 次阅读 | 评论: 0 | 来源: 网友投递
jQuery javascript框架
jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。
1.布局:
<div class="show">
<img src="~/images/head_icon.png" />
<div class="drop" style=" display:none; z-index:80000" id="profileMenu">
<ul>
<li>
<a class="pass" style="cursor: pointer"
href='#'>
<span>修改密码</span>
</a>
</li>
<li>
<a class="quit" style="cursor: pointer"
href='#'
><span>退出</span></a>
</li>
</ul>
</div>
</div>
2.js控制:
function dropMenu(obj) {
$(obj).each(function () {
var theSpan = $(this);
var theMenu = theSpan.find(".drop");
var tarHeight = theMenu.height();
theMenu.css({ height: 0, opacity: 0 });
var t1;
function expand() {
clearTimeout(t1);
//theSpan.find('a').addClass("selected");
theMenu.stop().show().animate({ height: tarHeight, opacity: 1 }, 200);
}
function collapse() {
clearTimeout(t1);
t1 = setTimeout(function () {
// theSpan.find('a').removeClass("selected");
theMenu.stop().animate({ height: 0, opacity: 0 }, 200, function () {
$(this).css({ display: "none" });
});
}, 250);
}
theSpan.hover(expand, collapse);
theMenu.hover(expand, collapse);
});
}