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


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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
dess中一个简单的多路委托的实现
Jul 20 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
文件上传的实现
2006/10/09 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
python生成密码字典的方法
2018/07/06 Python
Flask之请求钩子的实现
2018/12/23 Python
python中random模块详解
2021/03/01 Python
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
学校七一活动方案
2014/01/19 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
Python实现仓库管理系统
2022/05/30 Python