始终在屏幕中间显示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在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
JS实现星星海特效
2019/12/24 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
Python实现全排列的打印
2018/08/18 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
入党申请自荐书范文
2014/02/11 职场文书
小学家长评语大全
2014/04/16 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
教师个人教学总结
2015/02/11 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
python Django框架快速入门教程(后台管理)
2021/07/21 Python