始终在屏幕中间显示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版代码高亮
Jun 26 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
JavaScript WeakMap使用详解
Feb 05 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
Look And Say 序列php实现代码
2011/05/22 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
详解JavaScript函数
2015/12/01 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
python excel转换csv代码实例
2019/08/26 Python
Python 内存管理机制全面分析
2021/01/16 Python
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
婚庆答谢词
2015/01/04 职场文书
市场营销计划书范文
2015/01/16 职场文书
教师党员自我评价范文
2015/03/04 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书