始终在屏幕中间显示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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
jQuery插件开发汇总
May 15 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 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数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
js GridView 实现自动计算操作代码
2009/03/25 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
常用的js方法合集
2017/03/10 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
vue写一个组件
2018/04/09 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
利用python代码写的12306订票代码
2015/12/20 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
六道php面试题附答案
2014/06/05 面试题
外包公司软件测试工程师
2014/11/01 面试题
社区八一活动方案
2014/02/03 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
法制宣传口号
2014/06/16 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
2015年组织部工作总结
2015/04/03 职场文书
Python 视频画质增强
2022/04/28 Python
深入理解pytorch库的dockerfile
2022/06/10 Python