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


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 相关文章推荐
javascript 流畅动画实现原理
Sep 08 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
九种原生js动画效果
Nov 11 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
深入解析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
将数组写入txt文件 var_export
2009/04/21 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
文本加密解密
2006/06/23 Javascript
JavaScript Date对象使用总结
2009/05/14 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
wxPython框架类和面板类的使用实例
2014/09/28 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
python中threading超线程用法实例分析
2015/05/16 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python中的__slots__示例详解
2017/07/06 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
Python实现全排列的打印
2018/08/18 Python
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
大学生入党群众意见书
2015/06/02 职场文书
禁毒主题班会教案
2015/08/14 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
分享提高 Python 代码的可读性的技巧
2022/03/03 Python