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


Posted in Javascript onMarch 10, 2011

一、在中间显示;(参考: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;
Javascript 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
微信小程序 获取javascript 里的数据
Aug 17 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 #Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 #Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 #Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 #Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 #Javascript
JQuery中的$.getJSON 使用说明
Mar 10 #Javascript
基于jquery的地址栏射击游戏代码
Mar 10 #Javascript
You might like
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
python opencv实现图像配准与比较
2021/02/09 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
质量工程师岗位职责
2013/11/16 职场文书
教师简历自我评价
2014/02/03 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
个人融资协议书
2014/10/02 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
工作失职检讨书范文
2015/05/05 职场文书
赢在中国观后感
2015/06/02 职场文书