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


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 Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
关于使用js算总价的问题
Jun 23 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
vue组件开发之slider组件使用详解
Aug 21 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.MVC的模板标签系统(一)
2006/09/05 PHP
PHP中动态HTML的输出技术
2006/10/09 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python字符转换
2008/09/06 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
Python中操作符重载用法分析
2016/04/29 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
python正则-re的用法详解
2019/07/28 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
python不同版本的_new_不同点总结
2020/12/09 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
印度服装购物网站:Limeroad
2018/09/26 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
大学生就业求职信
2014/06/12 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
警示教育观后感
2015/06/17 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
浅谈redis缓存在项目中的使用
2021/05/20 Redis
python基于turtle绘制几何图形
2021/06/15 Python
HTTP中的Content-type详解
2022/01/18 HTML / CSS