浏览器打开层自动缓慢展开收缩实例代码


Posted in Javascript onJuly 04, 2013

例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style> 
#screefull{display:block; border:1px solid #bddbf3; width:954px; padding:3px 5px 7px; margin:0 auto 10px; background:#fef9db; } 
#mostrar{display:block; width:954px; display:none;} 
#screefull a.close{ display:block; width:25px; height:20px; background:url(img/cx.gif) no-repeat 0 0; overflow:hidden; float:right; margin:16px 8px 0 0; *margin-right:5px; text-decoration:none;} 
#screefull p{ display:block; text-align:center; font-family:"Microsoft Yahei"; font-size:14px; color:#000; height:28px; line-height:28px; vertical-align:middle;} 
#screefull var{ display:inline-block; *display:inline; *zoom:1; background:url(img/wicon.gif) no-repeat 0 0; width:28px; height:28px; overflow:hidden; vertical-align:middle; margin-right:10px;} 
#screefull em{ display:inline-block; *display:inline; *zoom:1; color:#ff0000; font-family:"Microsoft Yahei"; font-style:normal;} 
#screefull span{ display:inline-block; *display:inline; *zoom:1; vertical-align:middle;} 
#screefull p a{ display:inline-block; *display:inline; *zoom:1; color:#2400ff; text-decoration:underline;} 
</style> 
<script type="text/javascript" src="js/jquery.js"></script> 
</head> 
<body> 
<!--begin:1--> 
<div id="warn" class="scree clearfix" style="display:none;"> 
<div id="screefull"> 
<a href="#" class="close" onclick="closewarn('close')">[x]</a> 
<p><span>在<em>未通过审核的网站</em>添加广告代码,将不会产生佣金。<a href="#" target="_blank" >我知道了</a></span></p> 
</div> 
</div> 
<script type="text/javascript"> 
function closewarn(type) 
{ 
$("#warn").slideUp("slow"); 
if(type == 'know') 
{ 
$.post(window.location.href,{op : 'setwarn'},function(data) 
{ 
return true; 
}); 
} 
} 
window.onload = function() 
{ 
$("#warn").slideDown(2000); 
} 
</script> 
<!--end:1--> 
</body> 
</html>

解释上面代码段:
1、$("#warn").slideUp("slow");向上滑动, $("#warn").slideDown(2000);向下滑动
2、$.post(window.location.href,{op : 'setwarn'},function(data)
{
return true;
})
运用到了ajax 提交 跟服务器进行交互,
第一个参数是请求的地址 第二个是提交的参数 第三个是请求成功 之后调用的方法
参数op 的值是setwarn json串的格式具体运用解说看http://www.w3school.com.cn/jquery/ajax_post.asp
url 对应 locaotion.href(取得是当前页面的地址)
data对应 {op:setwarn} 字符串
success 对应 函数

3、window.onload = function(){}作用一般在<text/javascript>中写的函数都要在body页面中调用,用此函数就不用等着body页面中调用就可以执行了

Javascript 相关文章推荐
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
加速vue组件渲染之性能优化
Apr 09 Javascript
深入解析contentWindow, contentDocument
Jul 04 #Javascript
关于Javascript与iframe的那些事儿
Jul 04 #Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 #Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 #Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 #Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 #Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 #Javascript
You might like
PHP 模拟$_PUT实现代码
2010/03/15 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
Python的迭代器和生成器
2015/07/29 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
python 构造三维全零数组的方法
2018/11/12 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
python列表返回重复数据的下标
2020/02/10 Python
利用Python计算KS的实例详解
2020/03/03 Python
如何理解python面向对象编程
2020/06/01 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
党组织领导班子整改方案
2014/10/25 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书