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


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实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
jquery append与appendTo方法比较
May 24 jQuery
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 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
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
javascript设计模式 接口介绍
2012/07/24 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
使用Kivy将python程序打包为apk文件
2017/07/29 Python
python实现决策树分类
2018/08/30 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
毕业生造价工程师求职信
2013/10/17 职场文书
医科学校毕业生自荐信
2013/11/09 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
医学专业大学生求职信
2014/07/12 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
2015新学期开学寄语
2015/02/26 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
vue中 this.$set的使用详解
2021/11/17 Vue.js