今天来给大家贴一段代码，代码的作用就是利用jQuery将物体居中，并且转换显示和隐藏；

首先建立一个div标签并且写好css样式，具体如下

然后我想要的效果是当我点击了button这个按钮，test可以居中显示，第二次点击一次test消失，第三次点击又居中显示，这样循环下去；

具体js代码如下：

稍微解释一下代码的意思：

1、$('#test').get(0).flag = true;是为了建立一个标识，告诉浏览器什么时候应该显示，什么时候应该隐藏

2、上面的top就是让浏览器窗口的高度减去自己本身的高度再除以2就是平均高度，同理left也是这样，这里注意一下，页面的头部要加上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

不然jQuery获取高度可能会无效！

此文章属于王业楼的个人博客原创,若要转载请注明出处:王业楼的个人博客 www.ly89.cn

jQuery将物体居中，并且转换显示和隐藏的更多相关文章

  1. jquery控制css的display属性(显示与隐藏)

    jquery控制div的显示与隐藏,很方便的. 例如: $("#id").show()表示display:block, $("#id").hide()表示dis ...

  2. jquery之超简单的div显示和隐藏特效demo

    闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...

  3. -第3章 jQuery方法实现下拉菜单显示和隐藏

    知识点 jquery 的引入方式 本地下载引入 在线引入 children 只获取子元素,不获取孙元素 show() 显示. hide() 隐藏. 完整代码 <!-- Author: XiaoW ...

  4. jquery通过visible来判断标签是否显示或隐藏

    if($(".spnTotal").is(":visible")==false) { alert('隐藏'); } else { alert('显示'); } 

  5. 实例讲解如何利用jQuery设置图片居中放大或者缩小

    大家有没有见过其他网站的图片只要鼠标放上去就能放大,移出去的时候就能缩小,而且一直保持居中显示!其实jQuery提供一个animate函数可以使图片放大和缩小,只要改变图片的长和高就OK啦!但是ani ...

  6. 修改linux内核开机logo并居中全屏显示【转】

    本文转载自:http://blog.csdn.net/xuezhimeng2010/article/details/49299781 1.准备图片  使用ubuntu自带的绘图软件GIMP是最为快捷的 ...

  7. js 与JQuery显示及隐藏方法

    虽然以后两种方式都能让文本信息隐藏和显示 第一种文本隐藏以后还是会占居位置, 第二种则不会占位置. <p id="p1">这是一段文本.</p> <i ...

  8. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

  9. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

随机推荐

  1. Jmeter4.0----测试数据说明之查看结果树（10）

    1.说明 在用jmeter辅助测试的过程中,我们经常需要根据接口返回的相关信息对我们测试的系统做相应的分析,所以呢,常常会用到jmeter中不同类型的监听器获取接口信息. 2.步骤 第一步: 线程组 ...

  2. is null 的优化

    bk1gx7xwj9du6SELECT *  FROM HEADERS GJH WHERE ATTRIBUTE10 IS NULL FOR UPDATE 优化建议如下: 短期来说:建立一个索引来优化: ...

  3. python 3 学习字符串和编码

    字符串和编码 阅读: 895464 字符编码 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节(byte),所以,一个字 ...

  4. OpenCV图像处理之 Mat 介绍

    我记得开始接触OpenCV就是因为一个算法里面需要2维动态数组,那时候看core这部分也算是走马观花吧,随着使用的增多,对Mat这个结构越来越喜爱,也觉得有必要温故而知新,于是这次再看看Mat. Ma ...

  5. 客户端rsyslog配置文件详解

    客户端rsyslog配置文件详解 最近再开发一个rsyslog的接收服务端,支持udp,tcp和tls三种协议.所以去仔细研究了一下rsyslog.conf的配置文件,下面来详细说一下. 因为我这儿重 ...

  6. 零基础逆向工程16_C语言10_宏定义_头文件_内存分配_文件读写

    #define 无参数的宏定义的一般形式为:#define 标识符 字符序列 如:#define TRUE 1 注意事项: 1.之作字符序列的替换工作,不作任何语法的检查 2.如果宏定义不当,错误要到 ...

  7. SAP云平台的Document Service

    SAP云平台以微服务的方式提供了Document的CRUD(增删改查)操作.该微服务基于标准的CMIS协议(Content Management Interoperability Service). ...

  8. UVALive 4329 Ping pong （BIT）

    枚举中间的人,只要知道在这个人前面的技能值比他小的人数和后面技能值比他小的人数就能计算方案数了,技能值大的可有小的推出. 因此可以利用树状数组,从左到右往树上插点,每个点询问sum(a[i]-1)就是 ...

  9. springmvc 的原理分析

    1. 用户发送请求至前端控制器(DispatcherServlet) 2.DispatcherServlet 将受到的请求调用HandlerMapping 处理映射器 3.处理器映射器根据配置注解找到 ...

  10. 一些常用的HTML标签

    由于本人目前没有系统学习,日常碰见哪个有用就记下来. pre标签 可定义预格式化的文本,在pre元素中的文本会保留空格和换行符.比如我们展示源代码的时候,只要放一个pre标签,然后把代码直接复制.粘贴 ...