`
xutao7787
  • 浏览: 55237 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery实现居中定位div

阅读更多

$("a").click(function(e){
        e.preventDefault();
        var o=$("#id");
        var itop=(document.documentElement.clientHeight-o.height())/2+document.documentElement.scrollTop;
        var ileft=(document.documentElement.clientWidth-o.width())/2+document.documentElement.scrollLeft;
        o.css({
            position:"absolute",
            top:itop+"px",
            left:ileft+"px"
        }).show();
});

分享到:
评论
2 楼 evanzong 2011-11-22  
绝对定位的地方,终于看到了,真是受用啊!锋利的jquery这本书上的例子有上有个地方就写错了,痛苦了我好几天,也可能没错,是引用jquery文件的版本问题。。。。总之是解决了!感谢
1 楼 yangsong0418 2011-02-17  
请提供html和相应css文件。

相关推荐

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

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

    jquery实现居中可拖拽窗体

    本文将详细解析"jquery实现居中可拖拽窗体"这一主题,帮助你理解如何利用jQuery创建一个可以居中显示并允许用户拖动的窗口。 首先,让我们了解基本的HTML结构。在实现居中可拖拽窗体时,你需要一个包含标题和内容的...

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

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

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

    标题中的“jquery实现div上下左右居中显示的插件.zip”指的是一个基于jQuery的JavaScript插件,用于在网页中使div元素实现垂直和水平居中显示。这种功能在网页设计和开发中非常常见,尤其在创建响应式布局或动态内容...

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

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

    jQuery的div 重直水平居中

    jq22.com是一个jQuery插件和教程的集合网站,你可以在这个网站上找到更多关于jQuery居中效果的实现和其他有用的资源。 总的来说,通过CSS和jQuery的结合,我们可以轻松地实现div的水平和垂直居中,无论div是固定...

    JQUERY弹出模式DIV

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

    jquery实现图片居中裁剪

    本篇文章将深入探讨如何使用`jQuery`实现图片的居中裁剪,以达到在不同尺寸的图片上保持视觉一致性。 首先,我们需要理解“居中裁剪”的概念。这并不是指真正意义上的图像处理软件中的裁剪操作,而是指在浏览器中,...

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

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

    jquery图片居中放大代码.zip

    "jquery图片居中放大代码.zip"这个压缩包包含的资源是用于实现一个图片展示功能,当用户鼠标悬停在图片上时,图片会居中并放大,为用户提供更直观的查看体验。这个功能常应用于图片相册或产品展示页面,能够增加网站...

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

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

    jQuery.floatDiv 浮动弹窗层居中

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

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

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

    juqery实现div弹出居中

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

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

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

    jQuery实现的浮动层div浏览器居中显示效果

    本篇文章将详细讲述如何使用jQuery实现一个浮动层(Div)在浏览器中居中显示的效果。 首先,我们需要在HTML页面的`<head>`部分引入jQuery库。在文档中,我们通过`<script>`标签引入了jQuery的压缩版本(`jquery-...

    div弹出层 定位问题的 处理

    这可以通过JavaScript或jQuery实现,例如监听窗口的`resize`事件,然后重新计算并设置`div`的位置。 6. **Z-index管理**:确保弹出层的`z-index`值高于页面其他元素,以便它出现在最前面。`z-index`是一个整数值,...

    DIV水平垂直居中

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

    jQuery实现div拖拽效果实例分析

    在本文中,我们将深入探讨如何使用jQuery实现一个简单的div元素拖拽效果。通过实例分析,我们可以看到一个完整的HTML页面结构,包含必要的CSS样式和JavaScript代码,以实现div元素的拖动功能。 首先,jQuery库是...

Global site tag (gtag.js) - Google Analytics