示例：屏幕右侧悬浮框

原理：oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + "px";

知识点:

浏览器窗体的高度

document.documentElement.clientHeight

浏览器滚动的高度

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

html部分

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

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

</body>

#div1 { position:absolute; right:; bottom:; width:100px; height:150px; background:green;}

js部分

<script>

window.onscroll = function(){

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

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

	//oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + "px";

	oDiv.style.top = startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop);

}

var timer = null;

function startMove(iTarget){

	clearInterval(timer);

	timer = setInterval(function(){

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

		var speed = (iTarget - oDiv.offsetTop)/4;

		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

		if(oDiv.offsetTop == iTarget){

			clearInterval(timer);

		} else {

			oDiv.style.top = oDiv.offsetTop + speed + "px";

		}

	},30);

}

</script>

　　

同上面这个悬浮框，可心改成另一个示例：对联悬浮框

示例：对联悬浮框

原理：

iTarget = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop;

潜在问题：

对联一直在不停的抖动

检测分析：

1,打印出这个div 的offsetTop，发现它的值始终在两个相关1像素的值之间跳动

2,再打印iTarget发现它是800.5

原因：iTarget不是一个整数，造成“对联”不停的抖动

解决:

iTarget = parseInt((document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop);

js右侧悬浮框的更多相关文章

  1. JS错误记录 - 右侧悬浮框 - 缓冲运动

    本次练习错误总结: 1.  正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...

  2. [Javascript]右侧悬浮框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 原生js实现悬浮框滑动动画

    最近在做个人博客想做个相册,鼠标悬浮后出现个div并且鼠标移动到哪个相册,div跟随到哪个相片上. <!DOCTYPE html> <html lang="en" ...

  4. js实现页面悬浮框

    当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE ht ...

  5. 菜鸟学JS（三）——自动隐藏的悬浮框

    今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...

  6. （41）JS运动之右側中间悬浮框（对联悬浮框）

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  7. JavaScript侧边悬浮框

    <script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...

  8. HTML5气泡悬浮框(已经加上完整文件)

    源文件链接:http://pan.baidu.com/s/1pKHlNSn 设计气泡悬浮框 1.在网页设计中,气泡悬浮框常常用于页面中为某些对象显示提示信息,恰当地使用气泡悬浮框能够使网页布局更加完美 ...

  9. Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框

    问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...

随机推荐

  1. VS2008下OpenCV1.0的设置

    原地址:http://hi.baidu.com/caicai_coco/item/0f3b23e1742e3f11595dd825 1.下载安装最新的OpenCV版本,我使用的是OpenCV_1.0. ...

  2. VSTO 学习笔记（十三）谈谈VSTO项目的部署

    原文:VSTO 学习笔记(十三)谈谈VSTO项目的部署 一般客户计算机专业水平不高,但是有一些Office水平相当了得,尤其对Excel的操作非常熟练.因此如果能将产品的一些功能集成在Office中, ...

  3. AbstractQueuedSynchronizer的介绍和原理分析（转）

    简介 提供了一个基于FIFO队列,可以用于构建锁或者其他相关同步装置的基础框架.该同步器(以下简称同步器)利用了一个int来表示状态,期望它能够成为实现大部分同步需求的基础.使用的方法是继承,子类通过 ...

  4. Redis集群_3.redis主从自动切换Sentinel(转)

    Redis SentinelSentinel(哨兵)是用于监控redis集群中Master状态的工具,其已经被集成在redis2.4+的版本中 一.Sentinel作用:1):Master状态检测 2 ...

  5. hdu4027（线段树）

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4027 线段树功能:区间修改,区间求和. 分析:因为每个数至多开6次平方就变1了,所以对于每一段全为1的 ...

  6. IOS 与ANDROID框架及应用开发模式对照一

    IOS 和ANDROID操作系统都是眼下流行的移动操作系统,被移动终端和智能设备大量採用,两者都採用了先进的软件技术进行设计,为了方便应用开发两者都採用了先进的设计模式. 两者在框架设计上都採用了什么 ...

  7. 《Node.js In Action》笔记之流程控制

    转向Javascript后,开始学习了node.js,选择的第一本书是<Node.js in Action> 将近一个月时间,断断续续看完,选几个点做下笔记 1.实现串行化流程控制 var ...

  8. 如何通过shell脚本操作MongoDB

    通过shell脚本对MongoDB进行自动化操作 运行写好的 ./show.sh 脚本 发现能够建立mongo链接 #!/bin/sh mongo WordPress --eval "sho ...

  9. java文件创建、删除、读取、写入操作大全

    一.获得控制台用户输入的信息 public String getInputMessage() throws IOException...{ System.out.println("请输入您的 ...

  10. struts2集成fckeditor(来自大型门户网站是这样练成的一书)