`
cenhonggang86830
  • 浏览: 45185 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

将DIV显示在屏幕中间

    博客分类:
  • Java
 
阅读更多
/*设置客户端的高和宽*/
function getClientBounds(){
    var clientWidth;
    var clientHeight;
    
    clientWidth = document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;
    clientHeight = document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight :   document.body.clientHeight;
        
    return {width: clientWidth, height: clientHeight};
}
 
/*设置客户端的高和宽*/  
function divcenter(){     
    var divId=document.getElementById('mxh');    
    var rr=new getClientBounds();  
    divId.style.display='block';  
    divId.style.left=(rr.width-divId.clientWidth)/2+document.body.scrollLeft;  
    divId.style.top=(rr.height-divId.clientHeight)/2+document.body.scrollTop;     
}  
 
分享到:
评论

相关推荐

    网页div在屏幕正中间显示

    网页div在屏幕正中间显示

    始终在屏幕中间显示Div的代码(css+js)

    始终在屏幕中间显示Div的代码/css+js) 在Web开发中,需要在屏幕中间显示一个Div元素,这是非常常见的需求。今天,我们将讨论如何使用CSS和JavaScript来实现这个功能。 知识点一:使用CSS实现absolute定位 在CSS中...

    JQuery 弹出层,始终显示在屏幕正中间

    " onclick="letDivCenter('#model')">点我让 DIV 始终显示在屏幕中间</a>`,点击该链接将触发弹出层的显示。 在 CSS 样式中,我们定义了两个类:`.mask` 和 `.model`。`.mask` 类用于定义遮罩层的样式,包括背景...

    将元素显示到屏幕正中间

    在网页设计中,将元素居中显示是一项常见的需求,尤其对于一些重要的提示信息或交互元素,保持它们在屏幕中央可以提供良好的用户体验。本教程将详细解释如何使用HTML和CSS技术,将一个元素(通常是一个`<div>`标签)...

    js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合.docx

    本篇文章将详细介绍如何利用 JavaScript 和 CSS 实现 DIV 始终居于屏幕中间、左下、左上、右上、右下的具体方法。 #### 一、基本原理 要实现 DIV 元素在屏幕上的固定位置显示,主要依赖于以下两个技术: 1. **CSS...

    jquery实现弹出div,始终显示在屏幕正中间的简单实例

    代码如下: //让指定的DIV始终显示在屏幕正中间 function setDivCenter(divName){ var top = ($(window).height() – $(divName).height())/2; var left = ($(window).width() – $(divName).width())/2; var ...

    DIV制作浮在页面的窗口.rar

    【标题】"DIV制作浮在页面的窗口"指的是在网页设计中使用HTML的`<div>`元素配合JavaScript技术实现一种浮动窗口的效果。这种效果常见于网站的侧边栏广告、在线客服窗口或提示信息框,它能够让特定内容始终出现在用户...

    js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合

    在网页设计中,将一个`DIV`元素保持在屏幕的特定位置是一项常见的需求,这通常涉及到CSS和JavaScript的结合使用。本篇文章将详细介绍如何利用这两种技术实现`DIV`元素始终居中、左下、左上、右上和右下显示。 首先...

    全屏css+DIV页面上中下三行布局,兼容各浏览器中间居中显示

    本文将深入探讨如何使用CSS+DIV来创建一个全屏页面上中下三行布局,并确保在各种浏览器中都能实现中间内容的居中显示。 首先,我们需要理解CSS的盒模型和定位概念。盒模型包括内容区域(content)、内边距(padding...

    div 2列和3列显示

    标题中的“div 2列和3列显示”指的是在网页设计中使用HTML和CSS来创建两列或三列布局的方法。这种布局模式是网站设计的基础,常见于博客、新闻页面和电商网站,用于展示不同内容区域。下面我们将深入探讨这个话题。 ...

    让一个div居于页面正中间

    在网页设计中,让一个`div`元素居于页面正中间是一项常见的布局需求。这个任务可以通过多种方法实现,其中一种是使用CSS(Cascading Style Sheets)来定位元素。在这个例子中,我们看到一个简洁的方法,它利用了绝对...

    Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

    弹出的div可以一直在浏览器屏幕中间显示 问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top: [removed]documentElement.scrollTop + 340...

    js实现点击图片在屏幕中间弹出放大效果

    在网页设计中,有时我们需要为用户提供一种交互体验,比如点击图片后在屏幕中间弹出一个放大版的图片。这个功能可以提升用户体验,特别是在展示产品细节或者高质量图像时。本篇文章将详细讲解如何使用JavaScript...

    css+div布局经典案例

    下面将详细阐述CSS+div布局的核心概念、常见模式以及案例中的应用。 首先,CSS是用于描述HTML或XML(包括SVG、MathML等各种XML方言)文档样式的语言,它使得我们可以将样式与结构分离,使页面内容更易于维护和呈现...

    CSS+div 布局

    通过媒体查询(media queries)根据设备屏幕尺寸和方向,动态调整div的样式,确保网页在不同设备上都有良好的用户体验。 六、优化与性能 1. 避免使用过多的div:虽然div方便,但过度使用会增加代码复杂性,影响性能...

    DIV+CSS实现3列布局

    3. **响应式设计**:为了确保在不同设备和屏幕尺寸上都能良好显示,可以使用媒体查询(Media Queries)来实现响应式布局。例如,对于小屏幕设备,可以将三列变为堆叠布局: ```css @media (max-width: 768px) { #...

    CSS_DIV设计模板

    在CSS网页布局入门教程1中,你会学习如何设置一个固定宽度的单列布局,保持内容在不同屏幕尺寸下的稳定显示。 - **一列自适应宽度**:随着响应式设计的需求增加,自适应布局成为必需。教程2展示了如何创建宽度随...

Global site tag (gtag.js) - Google Analytics