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


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函数获取事件源的小例子
May 14 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
Vue.js表单控件实践
Oct 27 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
vue项目中使用多选框的实例代码
Jul 22 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中几种常见的超时处理全面总结
2012/09/11 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
Python实现聊天机器人的示例代码
2018/07/09 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
函授毕业自我鉴定
2013/12/19 职场文书
学生自我评价范文
2014/02/02 职场文书
食品安全标语
2014/06/07 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
《海上日出》教学反思
2016/02/23 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis