css+js定位到屏幕中间
ex:让一个div始终显示在屏幕中间
一、
css:#idName{position: absolute;z-index: 999;width: ?px;margin-top: ?px;}//此处的初始定位按具体的自己调
计算并设置页面滚动条改变时移动的距离:
function sc1(idName) {
    var d = document.getElementById(idName);
    d.style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - d.offsetHeight) / 2) 【此处加上或减去上移或者下移的高度】+ "px";
    d.style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - d.offsetWidth) / 2) + "px";
}
function scall() {
        sc1("idName");
        }
window.onscroll = scall;
            window.onresize = scall;
            window.onload = scall;
若是和diaplay一起使用 在显示后再调用
window.onscroll = scall;
            window.onresize = scall;
二、纯css实现始终显示在屏幕中间
ex:
#div_window {
    width: 400px; /**宽度**/
    height: 300px; /**高度**/
    position: fixed; /**定位采用此种方式**/
    left: 50%; /**左边50%**/
    top: 50%; /**顶部50%**/
    margin-top: -100px; /**上移-50%**/
    margin-left: -150px; /**左移-50%**/
    display: none;
    border: 1px black solid;
    background-color: #DCDCDC;
}
样式和宽高自己定,根据宽高调整margin-top,margin-left 将它调到页面中间即可。滚动时便会根据位置显示在屏幕中间。
css+js定位到屏幕中间的更多相关文章
- CSS+JS下拉菜单和纯CSS下拉菜单
		
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
 - HTML/CSS/JS编码规范
		
最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...
 - 前端工程师面试问题归纳(一、问答类html/css/js基础)
		
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
 - 一个小公司的前端笔试HTML CSS  JS
		
网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章 Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...
 - Blazor组件自做八 : 使用JS隔离封装屏幕键盘kioskboard.js组件
		
1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加kioskboard子文件夹,添加kioskboards.js文件 2.1 常规操作,懒加载js库, export function ...
 - CSS中定位机制的想法
		
对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...
 - Gulp:静态资源(css,js)版本控制
		
为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源: 然后涉及到的html模板里的src也要做相应的修改,静态资源需要优化(压缩合并) 文件目录 ...
 - CSS之定位,relative/absolute/fixed的用法
		
其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
 - CSS&JS定位器
		
一.CssSelector定位器 1.概述 CssSelector是效率很高的元素定位方法,Selenium官网的Document里极力推荐使用CSS locator,而不是XPath来定位元素,原因 ...
 
随机推荐
- webForm中的验证控件
			
1.非空验证控件:RequireFieldValidator :2.数据比较验证:CompareValidator :3.数据范围验证:RangeValidator :4.正则表达式验证:Regul ...
 - svn更新操作时提示database is locked
			
If you're on Windows version just let's do the next: Right click on the repo folder and go to Tortoi ...
 - CentOS7上搭建WEB服务器
			
mysql 安装 直接yum install mysql-server是不可以的 1 wget http://repo.mysql.com/mysql-community-release-el7-5. ...
 - 通过JDBC进行简单的增删改查(以MySQL为例)
			
目录 前言:什么是JDBC 一.准备工作(一):MySQL安装配置和基础学习 二.准备工作(二):下载数据库对应的jar包并导入 三.JDBC基本操作 (1)定义记录的类(可选) (2)连接的获取 ( ...
 - jquery 序列化
			
//生成发件人Json信息 function buildSenderInfoJson() { var sendName = $("#SendName").val(); var se ...
 - 大毕设-MATLAB-滤波器的实现
			
在工程实际中遇到的信号经常伴有噪声,为了消除或减弱噪声,提取有用信号,必须进行滤波,能实现滤波功能的系统称为滤波器.严格地讲,滤波器可以定义为对已知的激励提供规定响应的系统,响应的要求可以在时域或频域 ...
 - SqlServer传输数据到ORACLE,SSIS
			
一.配置32位ODBC 配置tnsname文件,增加ORACLE数据库 打开32位ODBC 二.创建一个PROJECT并配置数据源 1.创建一个project 三.数据传输SSIS,工作流 四.为DT ...
 - [测]jieba分词
			
import jieba import os import jieba.analyse with open('src.txt', 'r') as file: data = file.read() se ...
 - find命令:忽略一个目录或者多个目录
			
example: find ./ ! -path "./output/*" ! -path "./output1/*" -type f | xargs grep ...
 - Oracle中的sql操作符    和分析函数
			
Oracle中的操作符算术操作符:无论是在sqlserver,或者是java中,每种语言它都有算术操作符,大同小异. Oracle中算术操作符(+)(-)(*)(/) 值得注意的是:/ 在oracle ...