始终在屏幕中间显示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 相关文章推荐
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
JS实现简易留言板(节点操作)
Mar 16 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
基于JavaScript实现轮播图效果
Jan 02 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程序员必须清楚的问题汇总
2014/12/18 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
javascript eval函数深入认识
2009/02/21 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
Angular的$http与$location
2016/12/26 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
js制作提示框插件
2020/12/24 Javascript
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
使用Python进行目录的对比方法
2018/11/01 Python
深入理解Django-Signals信号量
2019/02/19 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
村容村貌整治方案
2014/05/21 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
协议书范文
2015/01/27 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL