今天来给大家贴一段代码，代码的作用就是利用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. 过流监测芯片ADS720/723

    在电机应用领域经常需要用到过流监测和保护,allegro的ADS系列就可以很好实现.将芯片串接在电机之前,根据自己要保护的电流大小选择合适的量程,个根据自己ADC测量电压范围选择合适的灵敏度.这类芯片 ...

  2. Jenkins+Gitlab+Ansible自动化部署(一)

    首先准备实验环境 虚拟机 主机名 IP地址 服务 系统版本 内核版本 Vmware Workstation 14 gitlab.example.com 192.168.244.130 gitlab  ...

  3. jquery自定义组件开发

    jquery的组件已经有很多,但是有可能找不到符合我们需求的组件,所以我们可以动手自己封装一个jquery组件. 第一步要知道封装jquery组件的基本语法 (function ($) { $.fn. ...

  4. Python踩坑之旅其二裸用os.system的原罪

    目录 1.1 踩坑案例 1.2 填坑解法 1.3 坑位分析 1.4.1 技术关键字 1.5 填坑总结 2. 前坑回顾 2.1 Linux中, 子进程拷贝父进程哪些信息 2.2 Agent常驻进程选择& ...

  5. dede用户登录时，跳转到提示页时报404错误

    做了一个项目,本地运行,用的是Apache服务器,一切正常. 可是当我把项目放到VPS中运行时,每当输入用户名登录时,调转到"成功登录,3秒钟后转向网站主页"的提示页面时,页面的顶 ...

  6. 值类型 VS 引用类型~

    问     题 值  类  型 引 用 类 型 这个类型分配在哪里? 分配在栈上 分配在托管堆上 变量是怎么表示的? 值类型变量是局部复制 引用类型变量指向被分配得实例所占的内存 基类型是什么? 必须 ...

  7. C++程序中调用WebService的实现

    前言 因为最近的项目中需要运用到在MFC程序中调用WebService里面集成好了的函数,所以特意花了一天的时间来研究WebService的构建以及如何在MFC的程序中添加Web引用,进而来实现在C+ ...

  8. 《超实用的Node.js代码段》连载一：获取Buffer对象字节长度

    我们知道Node.js框架下的Buffer对象能够对二进制数据提供很好的支持,那么获取一个Buffer对象真实的字节长度则是必须要用到的功能了.Node.js框架为开发人员提供了一个Buffer.by ...

  9. vuejs 学习旅程之 vue-resource

    如上图,所有的数据是从php获取过来的.所以就引出了vuejs 与php通信之说.百度了一下需要使用到一个vue插件 就是今天的主题 vuejs 学习旅程之 vue-resource vue-reso ...

  10. jquery中使用each遍历。

    一直知道each这个方法,但是就是不太明白到底怎么用,今天两个地方都使用了each.真的太高兴了,太有成就感了. 东钿微信平台订单列表页 全部订单之前是按照产调,评估,借款的顺序依次排下来,华总说要按 ...