始终在屏幕中间显示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中的preventDefault与stopPropagation详解
Jan 29 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
微信小程序封装分享与分销功能过程解析
Aug 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
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
50个比较实用jQuery代码段
2011/09/18 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
python实现外卖信息管理系统
2018/01/11 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python字符串查找函数的用法详解
2019/07/08 Python
python实现井字棋小游戏
2020/03/04 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
python从PDF中提取数据的示例
2020/10/30 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
python3实现飞机大战
2020/11/29 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
类和结构的区别
2012/08/15 面试题
市三好学生主要事迹
2014/01/28 职场文书
职务聘任书范文
2014/03/29 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
公务员年终个人总结
2015/02/12 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
民事纠纷协议书
2016/03/23 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis
Web应用开发TypeScript使用详解
2022/05/25 Javascript