今天来给大家贴一段代码，代码的作用就是利用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. POJ-2186-Popular Cows（强连通分量，缩点）

    链接:https://vjudge.net/problem/POJ-2186 题意: 有N(N<=10000)头牛,每头牛都想成为most poluler的牛,给出M(M<=50000)个 ...

  2. net core (上)

    net core (上) 本文是基于Windows10的. 下载地址: https://code.visualstudio.com/ insider 版下载地址: https://code.visua ...

  3. spring基础概念AOP与动态代理理解

    一.代理模式 代理模式的英文叫做Proxy或Surrogate,中文都可译为”代理“,所谓代理,就是一个人或者一个机构代表另一个人或者另一个机构采取行动.在一些情况下,一个客户不想或者不能够直接引用一 ...

  4. 牛客网Java刷题知识点之什么是异常、异常处理的原理是什么、为什么要使用异常、异常体系、运行时异常、普通异常、自定义异常、异常链

    不多说,直接上干货! 在这个世界不可能存在完美的东西,不管完美的思维有多么缜密,细心,我们都不可能考虑所有的因素,这就是所谓的智者千虑必有一失.同样的道理,计算机的世界也是不完美的,异常情况随时都会发 ...

  5. 解决Linux下SSH等终端乱码问题

    1.vi /etc/sysconfig/i18n Centos5.5原来内容是: //LANG="en_US.UTF-8" //SYSFONT="latarcyrheb- ...

  6. Ionic开发-搭建开发环境

    1安装node.js 2安装ionic & cordova: 命令行输入:npm install –g cordova ionic 注:-g表示全局安装,也可以进入指定的目录安装,但这里推荐全 ...

  7. javaweb-servlet生成简单的验证码

    package com.serv; import java.awt.Color; import java.awt.Graphics; import java.awt.image.BufferedIma ...

  8. i-nex安装教程

    sudo add-apt-repository ppa:i-nex-development-team/stable sudo apt-get updatesudo apt-get i-nex

  9. CSS 利用border三角形绘制方法

    CSS 三角形绘制方法,这里面的transparent比较重要,有和没有影响很大: 原理:这个div是由4个三角形组成,每个三角对应一个border,隐藏其它3个border,就可以得到一个三角形. ...

  10. HDU 3592 World Exhibition （差分约束，spfa，水）

    题意: 有n个人在排队,按照前后顺序编号为1~n,现在对其中某两人的距离进行约束,有上限和下限,表示dis[a,b]<=c或者dis[a,b]>=c,问第1个人与第n个人的距离最多可能为多 ...