始终在屏幕中间显示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的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 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
重置版宣传动画
2020/04/09 魔兽争霸
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
详解python分布式进程
2018/10/08 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python对wav文件的重采样实例
2020/02/25 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
六五普法宣传标语
2014/10/06 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
html粘性页脚的具体使用
2022/01/18 HTML / CSS
使用python求解迷宫问题的三种实现方法
2022/03/17 Python