Jquery和ajax开发案例之---浮动窗口
2014-04-19 16:26
309 查看
案例(浮动窗口 、动态股票信息、弹出菜单、可编辑的表格 、自动补全输入框)下载地址:
http://download.csdn.net/detail/zl594389970/7218687
效果图:
页面代码:
jquerywin.js代码:
win.css代码:
http://download.csdn.net/detail/zl594389970/7218687
效果图:
页面代码:
<head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>JQuery实例:浮动窗口</title> <script type="text/javascript" src="js/jquery-1.3.1.js"></script> <script type="text/javascript" src="js/jquerywin.js"></script> <link rel="stylesheet" type="text/css" href="css/win.css"> </head> <body> <a onclick="showwin()" href="#">显示浮动窗口</a> <div id="win" > <div id="title">我是标题<span id="close" onclick="hide()">X</span></div> <div id="content">我是内容</div> </div> </body>
jquerywin.js代码:
//显示浮动窗口 function showwin() { //找到窗口节点 var windNode = $("#win"); //让div显示出来 windNode.fadeIn("slow"); //windNode.toggle(); // windNode.css("display","block"); } function hide(){ var windNode = $("#win") windNode.fadeOut("slow"); //windNode.css("display","none"); }
win.css代码:
#win{ border: 3px solid #FF0000; width: 400px; height: 300px; position: absolute; left: 400px; top: 200px; display: none; } #title{ background-color: blue;; color: white; padding-left: 3px; padding-top: 4px; } #content{ padding-left: 4px; padding-top: 5px; } #close{ margin-left: 290px; cursor: pointer; }
相关文章推荐
- jQuery中的DOM操作
- jquery validate表单验证在ie8下不兼容的解决办法
- jQuery Ajax 实例 全解析
- jQuery鼠标悬停放射出炫幻效果
- jQuery右侧弹出全屏覆盖菜单
- Jquery常用方法
- Jquery的DOM操作
- Jquery的选择器
- jquery 之事件 多库共存(noConflict)
- JavaScript 事件委托 以及jQuery对事件委托的支持
- Jquery mobile 总结
- jQuery选择器
- JQuery window、document、 body (转)
- 用jQuery方式处理checkedbox的方式
- jQuery实现一个淡入淡出下拉菜单 非常简易
- [原创]jQuery Validation范例
- JQuery validate验证规则
- JQuery的Ajax跨域请求的解决方案
- JQuery模拟二------添加extend函数和简单选择器
- jquery 使滚动条滚动到一定位置后不在滚动