`
234390216
  • 浏览: 10238838 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
博客专栏
A5ee55b9-a463-3d09-9c78-0c0cf33198cd
Oracle基础
浏览量:462903
Ad26f909-6440-35a9-b4e9-9aea825bd38e
springMVC介绍
浏览量:1775986
Ce363057-ae4d-3ee1-bb46-e7b51a722a4b
Mybatis简介
浏览量:1398756
Bdeb91ad-cf8a-3fe9-942a-3710073b4000
Spring整合JMS
浏览量:395158
5cbbde67-7cd5-313c-95c2-4185389601e7
Ehcache简介
浏览量:680175
Cc1c0708-ccc2-3d20-ba47-d40e04440682
Cas简介
浏览量:531150
51592fc3-854c-34f4-9eff-cb82d993ab3a
Spring Securi...
浏览量:1185043
23e1c30e-ef8c-3702-aa3c-e83277ffca91
Spring基础知识
浏览量:468833
4af1c81c-eb9d-365f-b759-07685a32156e
Spring Aop介绍
浏览量:151494
2f926891-9e7a-3ce2-a074-3acb2aaf2584
JAXB简介
浏览量:68344
社区版块
存档分类
最新评论

使用JQuery使Div居中

阅读更多

Div居中是一个比较常见的需求。下面介绍一种使用JQuery使Div居中的方法

先假设有这样一个Div,<div id="d">test</div>

首先是要把需要居中的Div进行绝对定位,如:

<style type="text/css">

        #d {

              position: absolute;

              width: 500;

              height: 300;

              border: 1px solid red;

        }

</style>

有了这样的样式定义之后就是使其居中的js代码了。

var obj = $("#d");//获得相应的Div对象
var x = ($(window).width()-500)/2;//使用$(window).width()获得显示器的宽,并算出对应的Div离左边的距离
var y = ($(window).height()-300)/2;//使用$(window).height()获得显示器的高,并算出相应的Div离上边的距离
obj.css("top",y).css("left",x);

 上面这段代码可以在页面一加载完就执行。

分享到:
评论
1 楼 di1984HIT 2014-10-25  
不错啊。学习了~

相关推荐

    一款jQuery+DIV居中淡入淡出信息提示框示例

    总的来说,"一款jQuery+DIV居中淡入淡出信息提示框示例"结合了前端开发的多个核心知识点,包括jQuery的使用、CSS布局、事件处理和动画效果,展示了如何通过JavaScript和CSS实现一个优雅的交互效果。通过学习和理解这...

    jQuery的div 重直水平居中

    jQuery结合CSS可以提供灵活的方法来实现垂直和水平居中,无论是对于固定尺寸的div还是响应式的流体div。本篇将详细介绍如何使用jQuery和CSS实现这一目标。 首先,我们从纯CSS解决方案开始。在CSS3中,我们可以利用`...

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    以上就是关于“jQuery弹出div层窗口、div屏幕居中、背景滤镜效果和div拖拽效果”的核心知识点。通过熟练掌握这些技巧,开发者可以创建更富有互动性和用户体验的网页应用。在实际开发中,还需要根据不同的项目需求,...

    jquery实现div上下左右居中显示的js代码

    它可以判断外部div以及内部div的宽度高度,从而实现上下左右居中的目的,兼容主要浏览器 使用方法简单: 1、确保head中引入jquery库以及本例的css样式 2、将代码部分拷贝到你需要的地方 3、在代码...

    jquery实现div上下左右居中显示的插件.zip

    而"js"可能是指一个或多个JavaScript文件,这些文件包含了实现div居中显示的核心逻辑。通常,jQuery插件会有一个主文件,可能命名为"jquery.center-plugin.js",里面包含了与jQuery对象相关的函数和方法,用于添加和...

    jquery实现div悬浮中央的效果(原创)

    ### 使用jQuery实现Div悬浮居中的效果 在网页设计与开发中,经常需要让某个元素(如`&lt;div&gt;`)在浏览器窗口中始终保持居中的位置,无论是页面滚动还是窗口大小变化时都能够保持不变。这种效果可以通过多种方式实现,...

    jquery div 弹出框

    "jQuery div 弹出框"是指使用jQuery技术来创建一个可自定义的、浮动于页面上的对话框或提示框,通常称为模态窗口。这种弹出框通常用于显示警告、确认信息、详细内容或表单等。以下将详细讲解如何实现jQuery div弹出...

    jQuery超炫淡入淡出效果DIV渐变居中弹出框插件

    本篇文章将详细讲解基于jQuery实现的超炫淡入淡出效果、DIV渐变居中弹出框插件的原理与应用。 首先,"jQuery超炫淡入淡出效果"是指利用jQuery提供的fadeIn()和fadeOut()方法,实现元素的平滑透明度变化,从而达到...

    jquery仿div透明模态弹出窗

    总之,使用jQuery实现的仿div透明模态弹出窗是网页动态效果的一种常见应用,它能够增强用户体验,提供更直观的交互反馈。通过理解这一实例,开发者可以更好地掌握jQuery的事件处理和DOM操作技巧,同时也能了解到如何...

    jquery实现图片居中裁剪

    通过以上步骤,我们就能够使用`jQuery`实现在相册列表等场景中图片的居中裁剪效果,使不同尺寸的图片都能在预设的容器内整齐、美观地展示。当然,这种方法适用于简单的应用场景,对于更复杂的图像处理需求,可能需要...

    juqery实现div弹出居中

    本文将深入探讨如何使用jQuery实现div的弹出和居中。 首先,我们需要在HTML中创建一个div元素,作为我们要弹出并居中的内容。可以这样定义: ```html &lt;div id="popup" style="display:none;"&gt; 这是弹出的div内容 ...

    JQUERY弹出模式DIV

    "JQUERY弹出模式DIV"是指使用jQuery来实现一种常见用户界面设计——模态对话框或者称为弹出窗口。这种功能在网页中很常见,用于显示警告、确认信息或者展示详细内容等。 模态对话框(Modal Dialog)是一种阻止用户...

    jquery图片居中放大代码.zip

    使用jQuery监听鼠标悬停事件,然后改变图片的transform属性来实现放大和居中效果。 ```javascript $(document).ready(function() { var $container = $('.image-container'); var $img = $('img', $container); ...

    jQuery.floatDiv 浮动弹窗层居中

    middletop(居中置顶)、middlebottom(居中置低)、leftmiddle、rightmiddle

    DIV水平垂直居中

    总之,实现`div`的水平垂直居中有多种方法,包括CSS的Flexbox、Grid、绝对定位等,以及JavaScript/jQuery的动态调整。选择哪种方法取决于项目需求和浏览器兼容性要求。在实际开发中,通常会结合使用这些技术来达到...

    jQuery鼠标悬停居中放大显示内容代码

    "jQuery鼠标悬停居中放大显示内容代码"就是一个很好的例子,它允许用户在鼠标悬停在某个模块上时,该模块会自动居中并放大,以突出显示内部详细内容。这种效果常见于产品展示、图片预览或导航菜单等场景,能吸引用户...

    jquery.floatdiv 浮动层固定位置

    jquery.floatdiv 浮动层固定位置 /*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/ /*调用: 1 无参数调用:默认浮动在右下角 $("#id").floatdiv(); 2 内置...

    DIV 上下居中 多行 省略号

    需要注意的是,`line-clamp`在某些浏览器(如Firefox)中不支持,所以如果需要跨浏览器兼容性,可能需要使用JavaScript或jQuery插件来实现类似效果。 在实际应用中,可能还需要考虑响应式设计,确保在不同设备和...

    jQuery实现上下左右垂直居中.zip

    "jQuery实现上下左右垂直居中.zip" 提供的是一个名为 "jquery.valign" 的插件,它专用于解决HTML元素(如图片、文字)在div容器内部的垂直对齐问题。下面将详细介绍这个插件的工作原理以及如何使用。 `jQuery....

    基于jQuery实现的水平和垂直居中的div窗口

    } 2、通过css实现水平居中和垂直居中 通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情,您必须事先知道另外一个div的尺寸: 代码如下: .className{ width:300px; height:200px; position:absolute; ...

Global site tag (gtag.js) - Google Analytics