始终在屏幕中间显示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 相关文章推荐
Javascript访问器属性实例分析
Dec 30 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 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
ThinkPHP惯例配置文件详解
2014/07/14 PHP
HTML Dom与Css控制方法
2010/10/25 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python迭代器常见用法实例分析
2019/11/22 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
C++是不是类型安全的
2014/02/18 面试题
星空联盟C# .net笔试题
2014/12/05 面试题
一些Solaris面试题
2015/12/22 面试题
会计系个人求职信范文分享
2013/12/20 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
高中同学会活动方案
2014/08/14 职场文书
公司员工离职证明书
2014/10/04 职场文书
优秀教师推荐材料
2014/12/16 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
会计主管竞聘书
2015/09/15 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技