始终在屏幕中间显示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 相关文章推荐
js 处理数组重复元素示例代码
Dec 27 Javascript
js控制table合并具体实现
Feb 20 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
javascript关于继承解析
May 10 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 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中调用ASP.NET的WebService的代码
2011/04/22 PHP
解析yii数据库的增删查改
2013/06/20 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
django定期执行任务(实例讲解)
2017/11/03 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
python 读取串口数据的示例
2020/11/09 Python
德国高尔夫商店:Par71.de
2020/11/29 全球购物
小学生优秀评语大全
2014/04/22 职场文书
大学生工作自荐书
2014/06/16 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
贪污检举信范文
2015/03/02 职场文书
英雄儿女观后感
2015/06/09 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
浅谈python中的多态
2021/06/15 Python
Python使用pyecharts控件绘制图表
2022/06/05 Python