始终在屏幕中间显示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 相关文章推荐
javascript算法学习(直接插入排序)
Apr 12 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
js实现上下左右键盘控制div移动
Jan 16 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
桌面中心(四)数据显示
2006/10/09 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
JS 常用校验函数
2009/03/26 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Django Rest framework之认证的实现代码
2018/12/17 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
小学生考试获奖感言
2014/01/30 职场文书
同事打架检讨书
2014/02/04 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
公司离职证明标准范本
2014/10/05 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2014年营销工作总结
2014/11/22 职场文书
工程部岗位职责
2015/02/10 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
React 高阶组件HOC用法归纳
2021/06/13 Javascript