前段看到YAHOO首页一个弹出层效果, 发现还挺实用.
于是想自己做一个.
自己javascript 还不怎么行, 但对jQuery还是比较熟悉.
于是用jquery做了一个.
CSS样式和XHTML结构的话,是使用yahoo的样式.
我只做了 行为层(JS).
具体代码:
程序代码
$(function(){
//展开按钮
$('#Bl_3').click(function(){
//把外框架设置为显示.
//把left和top去掉 ,试试.
//$('#group_id').css({"display":"block"});
$('#group_id').css({"display":"block","left": "99px", "top": "6px"});
$('#group').animate({
left: "0"
}, 500);
})
//关闭按钮
$('#closeDiv').click(function(){
$('#group').animate({
left: "-530"
}, { queue: false, duration: 500 ,complete: cssrain });
return false;
})
//complete: 完成animate动作后,回调其他函数.
//把外框架设置为 隐藏.
function cssrain(){
$('#group_id').css("display","none");
}
})
演示:
http://www.cssrain.cn/demo/yahoodiv/index.htm
下载:
http://www.cssrain.cn/demo/yahoodiv/yahoodiv.rar
本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=811
本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=811
本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=811
