始终在屏幕中间显示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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
javascript json2 使用方法
Mar 16 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 Javascript
JavaScript实现复选框全选功能
Apr 11 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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
php中in_array函数用法探究
2014/11/25 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
从零学Python之入门(三)序列
2014/05/25 Python
python网络编程之文件下载实例分析
2015/05/20 Python
python实现k-means聚类算法
2018/02/23 Python
对python的文件内注释 help注释方法
2018/05/23 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
德国家具折扣店:POCO
2020/02/28 全球购物
经典c++面试题二
2015/08/14 面试题
厨房领班竞聘演讲稿
2014/04/23 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
毕业生求职信范文
2014/06/29 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
表扬通报怎么写
2015/01/16 职场文书
新郎结婚感言
2015/07/31 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers