示例：屏幕右侧悬浮框

原理：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. 一则简单演示样例看Oracle的“无私”健壮性

    Oracle的强大之处就在于他能总帮助让你选择正确的运行计划,即使你给了它错误的指示. 实验: 1. 创建測试表: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...

  2. 解决NGINX的WORDPRESS伪静态规则失效的问题

    解决NGINX的WORDPRESS伪静态规则失效的问题 前两天搬到了EMSVPS的PR线路上,用上了最新的WDCP2.0管理面板,支持多用户管理(我们几个合租的VPS,最需要这个功能了),感觉很不错, ...

  3. 南阳OJ 16 矩形嵌套

    描写叙述 有n个矩形,每个矩形能够用a,b来描写叙述,表示长和宽. 矩形X(a,b)能够嵌套在矩形Y(c,d)中当且仅当a<c,b<d或者b<c,a<d(相当于旋转X90度). ...

  4. hdu1428之spfa+dfs

    漫步校园 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  5. 关于CodeReview（java）（转）

    关于codereview,在平时的开发中,经常忽略的环节,参照目前介绍写好代码的几本书和之前掉进的坑,做了一个总结,分享出来. 为什么要做 通过review规避一些代码层面的问题 提升可读性,方便后续 ...

  6. CC ANUMLA（STL的运用）

    题目连接:http://www.codechef.com/problems/ANUMLA 题意:给一个序列所有子集和(2^n个子集),复原这个序列... 如:0 1 1 2 2 3 3 4 原序列为1 ...

  7. cocos2dx 制作单机麻将(一)

    今天開始打算解说下cocos2dx下怎样制作国标麻将 前半部分先解说麻将的逻辑部分,由于都是代码,可能会比較枯燥无聊. 这部分讲完后,你也能够用其它游戏引擎来制作麻将 后半部分,就解说余下的cocos ...

  8. coding 除了托管外，还能进行团队协作.

    coding 除了托管外,还能进行团队协作. oschina 也是非常不错的.

  9. C#文件操作基础之File类和FileInfo类

    文件和I/O流的差异: 文件是一些具有永久存储及特定顺序的字节组成的一个有序的.具有名称的集合. 因此对于文件,我们经常想到文件夹路径,磁盘存储,文件和文件夹名等方面. I/O流提供一种后备存储写入字 ...

  10. uva 11722 - Joining with Friend(概率)

    题目连接:uva 11722 - Joining with Friend 题目大意:你和朋友乘火车,而且都会路过A市.给定两人可能到达A市的时段,火车会停w.问说两人能够见面的概率. 解题思路:y = ...