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

一、在中间显示;(参考：sky100articles1790515)


代码如下:

.ordersearchDivCss
{
position: absolute;
z-index: 100;
display: block;
background-color: #6ec1df;
}
<div class="ordersearchDivCss" id="DivMain" style="width: 400px; height:200px" align="center"></div>

Js code
调用：<input type="button" id="Button1" onclick="sc1(‘DivMain')" />
// JScript 文件 通过元素id得到对象的函数
function $(id)
{
return document.getElementById(id);
}


代码如下:

function sc1(DivId) {
var Div = $(DivId);
$(DivId).style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - $(DivId).offsetHeight) / 2) + "px";
$(DivId).style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - $(DivId).offsetWidth) / 2) + "px";
//alert($(DivId).style.top);
}

二、始终在中间显示，滚动时，在Js中增加以下代码：


代码如下:

function scall() {
sc1("DivMain");
}
window.onscroll = scall;
window.onresize = scall;
window.onload = scall;

赞 (0)

相关推荐

  • js 打开新页面在屏幕中间的实现方法

    <a href="javascript:void(0)" onclick="window.open('http://www.jb51.net', 'newwindow', 'height=500, width=900, top='+Math.round((window.screen.height)/2<span style="font-family: Arial, Helvetica, sans-serif;">-250</span

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

    一.在中间显示;(参考:sky100articles1790515) 复制代码 代码如下: .ordersearchDivCss { position: absolute; z-index: 100; display: block; background-color: #6ec1df; } <div class="ordersearchDivCss" id="DivMain" style="width: 400px; height:200px&quo

  • 汇编语言有关在屏幕区显示字符的四种方法(推荐)

    李忠老师的<x86汇编语言:从实模式到保护模式>中第五章到第七章的部分,每一章在讲述知识点的同时,分别使用了三种不同的显示字符的方法,加上调用BIOS的10h中 断的方法,这里做出一次简单梳理: 一:第五章,最基础的直接用mov 的方法 代码如下: ;代码清单5-1 ;文件名:c05_mbr.asm ;文件说明:硬盘主引导扇区代码 ;创建日期:2011-3-31 21:15 mov ax,0xb800 ;指向文本模式的显示缓冲区 mov es,ax ;以下显示字符串"Label of

  • JS+CSS实现感应鼠标渐变显示DIV层的方法

    本文实例讲述了JS+CSS实现感应鼠标渐变显示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/

  • JSP分页显示的实例代码

    JSP分页显示的实例代码

    1.mysql的limit关键字 (DAO) select * from tablename limit startPoint, numberPerPage; tablename 就是要分页显示的那张表的名称: startPoint 就是起始的位置 -1: numberPerPage 就是一页显示的条数. 例如: select * from comment limit 20,5; 则是从comment表中抽取21~25号评论: 2.jQuery load函数 (页面JS) MySQL的limit

  • Qt如何设置窗口屏幕居中显示以及设置大小

    Qt如何设置窗口屏幕居中显示以及设置大小 设置窗口居中显示 方法一:在窗口(QWidget类及派生类)的构造函数中添加如下代码: #include <QDesktopWidget> //....... QDesktopWidget* desktop = QApplication::desktop(); // =qApp->desktop();也可以 move((desktop->width() - this->width())/2, (desktop->height()

  • jquery跟随屏幕滚动效果的实现代码

    jquery跟随屏幕滚动效果的实现代码

    我们在很多网站看到,当我们滚动网页时,网页内的广告或某个小区域并不会消失,而是浮动在屏幕的某个地方,特别是一些局域广告.那么这是怎么实现的呢?本文将引用乌徒帮的跟随屏幕滚动代码,对此效果做详解. 一.原始代码 下面是乌徒帮的跟随屏幕滚动代码,它的作用域为乌徒帮网页两侧的边栏,以及双击屏幕后的右侧隐藏栏. var $catalogueOffsetTop = $('aside#catalogue').offset().top; var $archiveOffestTop = $('aside#arc

  • jQuery Ajax 异步加载显示等待效果代码分享

    jQuery Ajax 异步加载显示等待效果代码分享

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和XHTML来表示. 2) 使用DOM模型来交互和动态显示. 3) 使用XMLHttpRequest来和服务器进行异步通信. 4) 使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Reques

  • JS实现超精简响应鼠标显示二级菜单代码

    JS实现超精简响应鼠标显示二级菜单代码

    本文实例讲述了JS实现超精简响应鼠标显示二级菜单代码.分享给大家供大家参考.具体如下: 这是一款精简版的二级导航菜单,响应鼠标的动作,鼠标放上即显示出菜单,常见的一种菜单样式.喜欢的朋友拿去修改一下,再美化一番,就够用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-mouse-show-menu-codes/ 具体代码如下: <html> <head> <title>二级菜单,响应鼠标</

  • javaScript实现可缩放的显示区效果代码

    javaScript实现可缩放的显示区效果代码

    本文实例讲述了javaScript实现可缩放的显示区效果代码.分享给大家供大家参考,具体如下: 这里演示可缩放的显示区,采用JS代码实现,鼠标按住区域的右下角,出现拖放箭头时,向下或向上拉,就可实现缩放操作,当区域较小时显示滚动条,平时也比较常见的效果,在此将JavaScript代码与大家分享. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ksf-box-style-demo/ 具体代码如下: <HTML> <HEAD>

  • 使用Python来做一个屏幕录制工具的操作代码

    使用Python来做一个屏幕录制工具的操作代码

    一.写在前面 作为一名测试,有时候经常会遇到需要录屏记录自己操作,方便后续开发同学定位.以前都是用ScreenToGif来录屏制作成动态图,偶尔的机会看到python也能实现.那就赶紧学习下. 二.效果展示 三.知识串讲 这次要讲的东西可能比较多了,涉及到pyqt5 GUI软件的制作.QThread多线程的使用.Sikuli库的图形操作.win32库的模拟键盘操作.cv2库的写视频文件等.下面我们一点点来蚕食我这次写的代码. 1.GUI界面制作 这次我用的是现成的Pyqt5界面布局类,QVBox

随机推荐