Jquery 示例二 简单动画
来源:互联网 发布:petshop7.0源码下载 编辑:程序博客网 时间:2024/05/18 08:55
主要用到
$("#id").show();//显示
$("#id").hide();//隐藏
$("#id").toggle();//状态相反
========================示例代码=============================
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Jquery Start</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>//记得引用
<script type="text/javascript">
$(function () {
var speed = 5000;//动画设置时间,毫秒
$("#btnShow").click(function (event) { //给btnShow按钮绑定点击事件
event.stopPropagation(); //取消事件的冒泡
//设置层的属性
var offSet = $(event.target).offset();
$("#divPop").css({ top: offSet.top + $(event.target).height() + "px", left: offSet.left, width: "300px", height: "200px" });
$("#divPop").show(speed); //divPop动态显示
});
$("#divPop").click(function (event) { $(this).hide(speed);//动态隐藏 })
$("#Button1").click(function (event) {
event.stopPropagation();
var offset1 = $(event.target).offset();
$("#div1").css({ top: offset1.top + $(event.target).height() + "px", left: offset1.left, width: "300px", height: "200px" });
$("#div1").toggle(speed);//动态切换,如果div1显示着,则单击按钮Button1控件div1隐藏(hide()),否则相反show()显示
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style=" border: solid 1px red; margin-bottom: 0px;"><br />
</div>
<div id="divPop" style="background-color:#f0f0f0; border:solid 1px red; display:none; ">
<div>这是显示层</div>
</div>
<div>
<br />
<input id="btnShow" type="button" value="提示文字" />
</div>
<div><input id="Button1" type="button" value="切换Div层" /></div>
<div id="div1" style="border:solid 1px blue; display:none; position:absolute; display:none;"></div>
</form>
</body>
</html>
============有错误的地方,请多多指教==================
--------------------ethan 待续-----------------------
- Jquery 示例二 简单动画
- jquery.treeview插件简单示例(二)
- JQuery(二)——简单动画效果
- jQuery学习二-简单动画-淡入淡出
- jQuery--动画篇(二)
- jQuery简单示例 一
- jquery-ajax简单示例
- jQuery Validation简单示例
- jQuery简单导航示例
- jQuery插件简单示例
- jQuery简单动画
- 了解jQuery简单动画
- jQuery简单动画
- ios--UIView动画简单示例
- 2.7 UIView动画简单示例
- jQuery开发之动画二
- jQuery学习二-动画-滑动
- jquery+ajax+php简单示例
- 关于MSDN for VB6和VC6
- linux 下的vsftp
- linux文本处理工具之sed
- android自带主题
- 45、ORACLE to_char函数详解
- Jquery 示例二 简单动画
- 使用 EclEmma 进行覆盖测试
- 基于Java Socket客户端、服务端聊天雏形
- flex和JS互调
- Android.jar文件浅析
- 自己学会汉化DevExpress控件
- Lucene在删除索引
- 46、解析oracle的ROWNUM
- Uva393 The Doors.