<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    #div1 {width:100px; height:100px; background:red; position: absolute; right:0;}

  </style>

  <script>

	window.onresize = window.onload = window.onscroll = function() {

		var oDiv = document.getElementById("div1");

		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

		var t = (document.documentElement.clientHeight - oDiv.offsetHeight)/2;

		oDiv.style.top = scrollTop + t + "px";

	}

  </script>

 </head>

 <body style="height:2000px;">

  <div id="div1"></div>

 </body>

</html>

　　这种方法可以将div块实时显示到可视区中间，但是会出现闪烁问题。解决办法1：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    #div1 {width:100px; height:100px; background:red; position: fixed; right:0; top:50%; margin-top:-50px;}

  </style>

 </head>

 <body style="height:2000px;">

  <div id="div1"></div>

 </body>

</html>

　　通过css布局解决闪烁问题，但是IE6并不支持fixed。可以使用动画滑入的方式解决IE6的固定定位问题，暂时不录入本文中。

javaScript之BOM操作1的更多相关文章

  1. JavaScript之BOM操作

    一, 什么是BOM BOM:Browser Object Model,浏览器对象模型 BOM的结构图: 从上图也可以看出: window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也 ...

  2. javaScript之BOM操作2

    <!doctype html> <html lang="en"> <head> <title>Document</title& ...

  3. Javascript学习--BOM操作

    1 获取UA(user Agent)用户代理 <!DOCtype html> <html> <head> <title></title> & ...

  4. JavaScript 中BOM的常用操作

    JavaScript BOM操作 1.获取浏览器窗口尺寸 var width=window,innerWidth //获取可视窗口宽度 var height=window.innerHeight // ...

  5. 前端javascript之BOM、DOM操作、事件

    BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...

  6. JavaScript的BOM、DOM操作、节点以及表格（二）

    BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型.     BOM提供了独立于内容 而与浏览器窗口进行交互的对象:     BOM由一系列相关的对象构成 ...

  7. 第一百一十一节，JavaScript，BOM浏览器对象模型

    JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...

  8. JavaScript DOM&BOM

    1.DOM含义 D: Document 文档 一份文档就是一棵节点树,每个节点都是一个对象O:Object 对象 JavaScript语言里对象可以分为三种类型: (1)用户定义的对象(user-de ...

  9. JavaScript的BOM和DOM

    JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...

随机推荐

  1. 制作类似ThinkPHP框架中的PATHINFO模式功能

    一.PATHINFO功能简述 搞PHP的都知道ThinkPHP是一个免费开源的轻量级PHP框架,虽说轻量但它的功能却很强大.这也是我接触学习的第一个框架.TP框架中的URL默认模式即是PathInfo ...

  2. JavaScript 对数据处理的5个API

    JavaScript对数据处理包括向上取整.向下取整.四舍五入.固定精度和固定长度5种方式,分别对应ceil,floor,round,toFixed,toPrecision等5个API,本文将对这5个 ...

  3. 菜鸟学Struts2——Struts工作原理

    在完成Struts2的HelloWorld后,对Struts2的工作原理进行学习.Struts2框架可以按照模块来划分为Servlet Filters,Struts核心模块,拦截器和用户实现部分,其中 ...

  4. .Net多线程编程—System.Threading.Tasks.Parallel

    System.Threading.Tasks.Parallel类提供了Parallel.Invoke,Parallel.For,Parallel.ForEach这三个静态方法. 1 Parallel. ...

  5. 在你的ASP.NET MVC中使用查找功能

    在程序中,使用查找功能是少之不了.今天在ASP.NET环境下演示一回. 在cshtml视图中,有三个文本框,让用户输入关键词,然后点击最右连的“搜索”铵钮,如果有结果将显示于下面. Html: 表格放 ...

  6. python10作业思路及源码：类Fabric主机管理程序开发（仅供参考）

    类Fabric主机管理程序开发 一,作业要求 1, 运行程序列出主机组或者主机列表(已完成) 2,选择指定主机或主机组(已完成) 3,选择主机或主机组传送文件(上传/下载)(已完成) 4,充分使用多线 ...

  7. AspNetPager分页控件样式的使用

    分页是Web应用程序中最常用到的功能之一,AspNetPager  简单实用,应用到项目后台中,棒极了! 自定义样式: <style type="text/css"> ...

  8. Android studio使用git教程

    ①下载Git工具,配置到Android studio中 http://git-scm.com/downloads ------------------------------------------- ...

  9. asp.net core 负载均衡集群搭建（centos7+nginx+supervisor+kestrel）

    概述 本文目的是搭建三台asp.net core 集群, 并配上 nginx做负载均衡   首先准备要运行的源码 http://pan.baidu.com/s/1c20x0bA 准备三台服务器(或则虚 ...

  10. jsp富文本图片和数据上传

    好记性不如烂笔头,记录一下. 2016的最后一天,以一篇博客结尾迎接新的一年. 此处用的富文本编辑器是wangEditor,一款开源的轻量级的富文本编辑器,这里着重说一下里面的图片上传功能. 服务器端 ...