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定位到屏幕中间的更多相关文章

  1. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  2. HTML/CSS/JS编码规范

    最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...

  3. 前端工程师面试问题归纳(一、问答类html/css/js基础)

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  4. 一个小公司的前端笔试HTML CSS JS

    网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章  Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...

  5. Blazor组件自做八 : 使用JS隔离封装屏幕键盘kioskboard.js组件

    1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加kioskboard子文件夹,添加kioskboards.js文件 2.1 常规操作,懒加载js库, export function ...

  6. CSS中定位机制的想法

    对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...

  7. Gulp:静态资源(css,js)版本控制

    为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源: 然后涉及到的html模板里的src也要做相应的修改,静态资源需要优化(压缩合并) 文件目录 ...

  8. CSS之定位,relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

  9. CSS&JS定位器

    一.CssSelector定位器 1.概述 CssSelector是效率很高的元素定位方法,Selenium官网的Document里极力推荐使用CSS locator,而不是XPath来定位元素,原因 ...

随机推荐

  1. css小知识之伪元素

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. 正则表达式提取string 中的表名

    简单版本: Regex reg = new Regex(@"(?i)\bfrom\b(?![^\[\]]*\])\s+(\[[^\[\]]+\]|\S+)"); MatchColl ...

  3. JavaScript 正则表达式的应用实例

    都是自己实例记录,不断更新中.... 1.字符串找出所有匹配的邮箱并替换 <html> <body> <script type="text/javascript ...

  4. 完整的 mime type 列表

    原文地址:http://blog.csdn.net/zhaoyw2008/article/details/46647723 Suffixes applicable Media type and sub ...

  5. thinkphp学习简易教程(一) thinkphp创建项目

    1.在本地服务器根目录下创建项目目录,如命名为app: 2.把thinkphp的压缩包解压到与项目同级目录下,如app是放在目录APP下面,即项目目录路径为'APP/app/',则thinkphp应解 ...

  6. window.print() 去掉页眉页脚及打印链接【转载】

    页面中添加样式: <style media="print"> @page { size: auto; /* auto is the initial value */ m ...

  7. 循序渐进Python3(十)-- 2 -- SqlAlchemy

    ORM             对象关系映射(英语:Object Relation Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类 ...

  8. linux系统数据盘挂载教程

    将数据盘挂载为/www命令:#mkdir /www & mount /dev/sdb1 /www ----------------------------------------------- ...

  9. scala变量

    #声明与定义(赋值) val  常量声明  val x:T  val x:T=e  (x:名字,T:类型,e:值) var 变量声明  var x:T  var x:T=e #类型省略(默认类型) v ...

  10. socket网络通信

    1.socket通常也称作"套接字",用于描述IP地址和端口.在internet上的主机一般运行了多个服务软件,同时提供几种服务,每种服务都打开一个socket,并绑定到一个端口上 ...