始终在屏幕中间显示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下checked取值问题的解决方法
Aug 09 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 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
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
初学Python函数的笔记整理
2015/04/07 Python
python使用turtle库绘制树
2018/06/25 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
精彩的大学生自我评价
2013/11/17 职场文书
销售主管岗位职责
2014/02/08 职场文书
社区反邪教工作方案
2014/06/16 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
租赁协议书
2015/01/27 职场文书
2015年工程师工作总结
2015/04/30 职场文书
团日活动总结格式
2015/05/11 职场文书
孟佩杰观后感
2015/06/17 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js