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


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 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
浅谈js中变量初始化
Feb 03 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 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
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
浅析PHP开发规范
2018/02/05 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
JS模拟自动点击的简单实例
2013/08/08 Javascript
js导出txt示例代码
2014/01/14 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
公积金单位接收函
2014/01/11 职场文书
会计助理岗位职责
2014/02/17 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2014年终工作总结范本
2014/12/15 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
golang 接口嵌套实现复用的操作
2021/04/29 Golang
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android