始终在屏幕中间显示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 相关文章推荐
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
js图片切换具体实现代码
Oct 13 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下使用SimpleXML 处理XML 文件
2010/02/27 PHP
Destoon实现多表查询示例
2014/08/21 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
深入理解React高阶组件
2017/09/28 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
一些Unix笔试题和面试题
2013/01/22 面试题
行政人员岗位职责
2013/12/08 职场文书
读书月活动方案
2014/05/22 职场文书
活动总结范文
2014/08/30 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
社会实践活动报告
2015/02/05 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
Golang数据类型和相互转换
2022/04/12 Golang
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python