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


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 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
使用JS实现简易计算器
Jun 14 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
SONY SRF-M100的电路分析
2021/03/02 无线电
深入php处理整数函数的详解
2013/06/09 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
Git命令之分支详解
2021/03/02 PHP
jquery checkbox实现单选小例
2013/11/27 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
纯javascript版日历控件
2016/11/24 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
Python入门学习之字符串与比较运算符
2015/10/12 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
python实现文本界面网络聊天室
2018/12/12 Python
python try 异常处理(史上最全)
2019/03/07 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
python 字段拆分详解
2019/12/17 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Django url 路由匹配过程详解
2021/01/22 Python
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
软件配置管理有什么好处
2015/04/15 面试题
主管会计岗位职责
2014/03/13 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
趣味运动会加油词
2015/07/18 职场文书
感谢师恩主题班会
2015/08/17 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL