jQuery将物体居中，并且转换显示和隐藏

今天来给大家贴一段代码，代码的作用就是利用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

时间： 2024-11-23 18:59:55

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

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

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

jquery判断radio选中与否进而显示或隐藏某个div

定义一个函数来判断这个radio是否被选中,方法是通过jq的选择器得到这个被checked的radio的值,如果没被选中,则为null啦,然后if分支,去显示隐藏某个div. function issetshoplist_theme2() { var value0 = $('input:radio[value=shoplist_theme2]:checked').val(); if(value0 != null) {$('#theme2set').show();} else {$('#theme

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

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

jQuery 显示和隐藏以及淡出淡入效果

jQuery实现动画效果? 1) 显示和隐藏 show():显示 hide():隐藏 togger():显示和隐藏的组合1234<script type="text/javascript"> $(function(){ $("tr:even").css("background-color","gray").eq(1).css("background-color","red")

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

本文转载自:http://blog.csdn.net/xuezhimeng2010/article/details/49299781 1.准备图片使用ubuntu自带的绘图软件GIMP是最为快捷的方式,使用命令进行转换也可以,实际测试中用命令转换图片老提示错误,所以就用GIMP的方式处理了.具体流程如下:(1)打开GIMP软件并加载图片资源(file->open),自己的原图片格式应该不限制,我的是bmp格式的.(2)点击Image->mode->Indexed 并在弹出的选项框内设

jQuery判断元素是否显示与隐藏

jQuery判断一个元素是显示还是隐藏,jQuery使用is()方法来判断一个元素是否显示,反之则为隐藏核心代码 if($("#username").is(":hidden")){ } 实例代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test.html</ti

jquery实现的点击页面其他地方隐藏显示的元素

jquery实现的点击页面其他地方隐藏显示的元素:在实际应用中,可能有这样的效果,那就是有这样一个弹出层,点击层本身的时候,这个层不会隐藏,而点击除去层之外的页面其他地方则会将这个层隐藏,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="

jquery实现的div的显示和隐藏效果

jquery实现的div的显示和隐藏效果:在网页的实际应用中,有些模块需要根据需要显示或者隐藏,下面就提供了几个这方面的实例,代码非常的简单,都是使用jquery自带的函数实现的,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>div隐藏显示效果</title> <style type="text/css&qu

jquery中使元素显示和隐藏方法之间的区别

在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方法之间的区别. 1.show()和hide() 使用hide()方法隐藏元素实际上是同时减少元素的高度.宽度以及不透明度,直到这三个属性为0,最后设置元素的css属性disolay:none.show()方法从上到下增大元素的高度,从左到右增大元素的宽度,同时增加内容的不透明度,直至元素完全显示.