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

2024-09-27 23:49:23

例子：

代码如下:

<!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>

<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>

</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设置FieldSet展开与收缩

JavaScript方法代码: 复制代码代码如下: // 设置FieldSet高度方法,支持IE浏览器.Firefox // 参数1:pTableID,FieldSet内部div或table的id // 参数2:pFieldSetID,FieldSet的ID // 参数3:pImageID,图片的ID,展开或收缩后更新图片SRC function FieldSetVisual( pTableID, pFieldSetID, pImageID ) { var objTable = documen
一个表格收缩展开的函数

无标题文档 function fnShowHide(){ obj = window.event.srcElement; obj.src=(obj.src.indexOf("close_w")!=-1)?"open_w.gif":"close_w.gif"; while(obj.tagName!="TR"){ obj = obj.parentElement; } while(obj=obj.nextSibling){ obj.s
jQuery 淡入淡出、展开收缩菜单实现代码

效果图:运行以后,刷新下即可. jQuery淡入淡出.展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bo
基于jQuery实现下拉收缩(展开与折叠)特效

jQuery下拉收缩特效 $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); body { margin: 0 auto; padding: 0; width: 570px; fon
带缓冲的收缩与展开内容效果

兼容ie5.5+ firefox2.0(因为我只有这两个浏览器,所以只在它们中做了测试) 看到blueidea很多朋友都发了一些收缩与展开内容的效果,唯一差的就是一个缓冲效果.不多说,运行一下就知道了,呵呵. 最大高度还需要固定数值.没有很好的解决方案.有兴趣的朋友帮忙解决一下拉,谢谢. 这个代码其他部分不会再发出更新和完善之后的了.如果需要封装就自己做做吧,呵呵. 放出代码为分享学习之用.请尊重别人的作品勿作商业用途!!!!! 复制代码代码如下: <html> <head>
jQuery图片的展开和收缩实现代码

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title
在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）

复制代码代码如下: <%@ page contentType="text/html; charset=GBK" language="java"%> <%@ page import="com.jstrd.mm.business.sysmgr.monitor.logic.MMStock2BudgetLogic" %> <% String query = request.getParameter("query&
浏览器打开层自动缓慢展开收缩实例代码

例子: 复制代码代码如下: <!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="Conte
python+selenium实现自动抢票功能实例代码

简介什么是Selenium? Selenium是ThoughtWorks公司的一个强大的开源Web功能测试工具系列,采用Javascript来管理整个测试过程,包括读入测试套件.执行测试和记录测试结果.它采用Javascript单元测试工具JSUnit为核心,模拟真实用户操作,包括浏览页面.点击链接.输入文字.提交表单.触发鼠标事件等等,并且能够对页面结果进行种种验证.也就是说,只要在测试用例中把预期的用户行为与结果都描述出来,我们就得到了一个可以自动化运行的功能测试套件.(Selenium的
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码

1. 测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-dist win7 1.2. 实践 HTML代码片段 <div class="container-fluid"> <div class="row">  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> <div class
BootStrap Typeahead自动补全插件实例代码

关键代码如下所示: $('#Sale').typeahead({ ajax: { url: '@Url.Action("../Contract/GetSale")', //timeout: 300, method: 'post', triggerLength: 1, loadingClass: null, preProcess: function (result) { return result; } }, display: "Value", val: "
easyui combobox开启搜索自动完成功能的实例代码

combo.json [{ "id":-1, "text":" ", "spell":"" },{ "id":1, "text":"类型1", "spell":"lx1" },{ "id":2, "text":"类型2", "spell&q
jQuery实现公告新闻自动滚屏效果实例代码

本文是小编参考网络上的一个小demo,自己做了下扩展,原来是向上滚动的,扩展了一个向下滚动的方法,具体实例代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滚屏实验</ti
Android AutoCompleteTextView自动提示文本框实例代码

自动提示文本框(AutoCompleteTextView)可以加强用户体验,缩短用户的输入时间(百度的搜索框就是这个效果). 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 最后一张获取文本框里面的值(其实就跟TextView.EditText一样): 首先,在xml中定义AutoCompleteTextView控件: activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/r
python 自动轨迹绘制的实例代码

用到的思维: 自动化思维,数据和功能分开处理,用数据驱动程序自动运行接口化设计,数据与程序的对接方式要清晰明了二维数据应用,应用维度组织数据,二维数据最常用代码 # AutoTrace.py import turtle as t t.title("自动轨迹绘制") t.setup(800,600) t.pencolor("red") t.pensize(5) t.speed(10) # 数据读取 datals=[] f=open("data.trac
Python获取当前公网ip并自动断开宽带连接实例代码

今天写了一个获取当前公网ip并且自动断开宽带连接的文件,和大家分享下. 这个文件的具体用途大家懂的,可以尽管拿去用,不过目前只适用于Windows平台,我的Python版本是2.7的,win32ras模块需要下载pywin32. 代码如下: #!coding: cp936 import win32ras import time,os def Connect(dialname, account, passwd): dial_params = (dialname, '', '', account,
Mybatis持久层框架入门之CRUD实例代码详解

目录 1.MyBatis第一个程序 1.1.代码演示 1.2.问题说明 2.CRUD操作 2.1.namespace 2.2.select 2.3.insert 2.4.update 2.5.delete 2.6.拓展思维 1.MyBatis第一个程序思路流程:搭建环境–>导入Mybatis—>编写代码—>测试 1.1.代码演示 1.搭建实验数据库 CREATE DATABASE `mybatis`; USE `mybatis`; DROP TABLE IF EXISTS `use

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

相关推荐

随机推荐