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


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 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
python中子类继承父类的__init__方法实例
2016/12/15 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
Python3实现飞机大战游戏
2020/04/24 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
曼城官方网上商店:Manchester City
2019/09/10 全球购物
跳槽求职信范文
2014/05/26 职场文书
社区志愿者活动总结
2014/06/26 职场文书
个人委托书怎么写
2014/09/17 职场文书
大学生村官个人总结
2015/02/15 职场文书
财务工作失误检讨书
2015/02/19 职场文书
国情备忘录观后感
2015/06/04 职场文书
教师节座谈会主持词
2015/07/03 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
vue实现移动端div拖动效果
2022/03/03 Vue.js