Jquery 点击按钮显示和隐藏层的代码
这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这里用到了jQuery的自定义动画,感觉这个自定义动画就是像flash里的形状和渐变动画一样,只要定义了开头和结尾的两个关键帧,中间的动画过程会自动完成,不用会jQuery的可去查下jQuery的帮助文档.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript"
src="../Javascript/jquery-1.6.js"></script>
<style type="text/css">
#choice_list_district{ height:50px;}
#tab td{cursor:pointer;}
</style>
<script type="text/javascript">
$(function () {
//绑定事件处理
$("#choice_list_district a").click(function (e) {
if ($("#divObj").css("display") == "none") {
e.stopPropagation();
//设置弹出层位置
var offset = $(e.target).offset();
//设置弹出层位置在点击的下面
$("#divObj").css({ top: offset.top $(e.target).height() "px", left:
offset.left });
$("#divObj").show();
}
else {
篮球世界杯冠军竞猜,$("#divObj").hide();
}
});
//单击空白区域隐藏弹出层
$(document).click(function (event) { $("#divObj").hide(); });
//单击弹出层则自身隐藏
//$("#divObj").click(function (event) { $("#divObj").hide(speed) });
$("#tab tr td").click(function (event) {
$("#aaa").val($(this).html());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="choice_list_district">
<a href="#">出来层</a>
</div><div id="divObj" style="position: absolute; width:200px;
height:200px; background:blue; border:1px solid block; display:none;
z-index:9999;">
<table id="tab">
<tr>
<td>aaa</td>
</tr>
<tr>
<td>bbb</td>
</tr>
</table>
</div>
<div style="position:absolute; top:200px; left:200px;">
<input type="text" id="aaa" />
</div>
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
代码:
复制代码 代码如下:
您可能感兴趣的文章:
- Jquery实现显示和隐藏的4种简单方式
- jquery和js实现对div的隐藏和显示方法
- JQuery显示、隐藏div的几种方法简明总结
- jQuery控制TR显示隐藏的几种方法
- jQuery控制TR显示隐藏的三种常用方法
- jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
- Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
- JQuery显示隐藏页面元素的方法总结
- Jquery中使用show()与hide()方法动画显示和隐藏图片
- Jquery实现控件的隐藏和显示实例
- jquery关于表格及表格列隐藏和显示问题探讨
- jQuery实现基本隐藏与显示效果的方法详解
function fun2() { /* 弹出框从上往下降下去 */
$("#pop").css("display", "block");
$("#pop").animate({
bottom: "-150px",
opacity: 0
},1000);
}
</script>
</head>
<body style="height: 1800px;">
<form id="form1" runat="server">
<div>
<input type="button" value="缓缓升起的窗口" id="btn" />
<div id="mes"></div>
</div>
</form>
<div id="pop">
<a href="http://g.cn"
target="_blank">有新用户注册</a>
<a id="cloPop" href="#">关闭</a>
</div>
</body>
</html>
复制代码 代码如下:
以上代码经测试,是有效果出来了,不过如果大家放在多个浏览器里测试一下就能看到,在IE6,IE7,IE8B2,OPERA,CHROME浏览器里的效果都是一样的,可是当你放到firefox里测试的时候,就会发现动画本来应该是从下往上的,可是现在却是从上往下,为什么会这样子呢???
经本人多方查证,并在老师的帮助下,终于解决该问题:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>QQ弹出消息</title>
<style type="text/css">
#pop{
width: 250px;
height: 150px;
border: 1px solid #fcc;
background-color: yellow;
position: absolute;
right: 16px;
bottom: -150px;
display: none;
}
</style>
<script src="jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#pop").css("opacity", 0);
$("#btn").click(fun);
$("#cloPop").click(fun2);
});
html{
height:100%;
}
function fun() { /*
弹出框从下往上慢慢升起,其中还包括了透明度的变化 */
$("#pop").css("display", "block");
$("#pop").animate({
bottom: "16px",
opacity: 1
},1000);
}
修改方法很简单,增加一条CSS设置即可:
function fun() { /*
弹出框从下往上慢慢升起,其中还包括了透明度的变化 */
$("#pop").css("display", "block");
$("#pop").animate({
bottom: "16px",
opacity: 1
},1000);
}
本文由美洲杯冠军竞猜发布于计算机教程,转载请注明出处:Jquery 点击按钮显示和隐藏层的代码
关键词: