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


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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
浅谈vue权限管理实现及流程
Apr 23 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下将XML转换为数组
2010/01/01 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
js单向链表的具体实现实例
2013/06/21 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
基于python的字节编译详解
2017/09/20 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
施工班组长岗位职责
2014/01/05 职场文书
单位单身证明范本
2014/01/11 职场文书
中学教师自我鉴定
2014/02/07 职场文书
小学生成绩单评语
2014/12/31 职场文书
广播体操比赛主持词
2015/06/29 职场文书
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers