示例：屏幕右侧悬浮框

原理：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. StringBuilder、StringBuffer和String三者的联系和区别（转）

    StringBuilder.StringBuffer和String三者的联系和区别 1. String 类    String的值是不可变的,这就导致每次对String的操作都会生成新的String对 ...

  2. 高度关注！国务院对A股发出强烈信号↓

    高度关注!国务院对A股发出强烈信号↓http://dwz.cn/2qHBd1郎咸平:中国股市存在一大隐疾 使其成为全球市场的一个另类!http://dwz.cn/2qHBVy一不小心,马云又完成了四场 ...

  3. groovy : 正則表達式

    groovy 正則表達式 企图模仿Perl 的语法,结果是我试用后.发现没法提取匹配的字符串. 还是直接引用 java.util.regex  负责对字符序列进行正則表達式匹配 先转载水木清华上的样例 ...

  4. Java对象序列化/反序列化的注意事项(转)

    Java对象序列化 对于一个存在Java虚拟机中的对象来说,其内部的状态只是保存在内存中.JVM退出之后,内存资源也就被释放,Java对象的内部状态也就丢失了.而在很多情况下,对象内部状态是需要被持久 ...

  5. nginx源代码分析--event事件驱动初始化

    1.在nginx.c中设置每一个核心模块的index ngx_max_module = 0; for (i = 0; ngx_modules[i]; i++) { ngx_modules[i]-> ...

  6. Activity与Service通信的方式有三种：

    在博客园看到的,看着挺不错的,借来分享下 继承Binder类 这个方式仅仅有当你的Acitivity和Service处于同一个Application和进程时,才干够用,比方你后台有一个播放背景音乐的S ...

  7. 自己定义控件（2.2）：SurfaceView和SurfaceHolder

    本例需求及流程: Activity载入自己定义的SurfaceView-> SurfaceView 构造器中启动线程A.循环改变SurfaceView的x,y坐标,当x,y坐标到某点时设渐显标志 ...

  8. 重温委托(delegate)和事件(event)

    1.delegate是什么 某种意义上来讲,你可以把delegate理解成C语言中的函数指针,它允许你传递一个类A的方法m给另一个类B的对象,使得类B的对象能够调用这个方法m,说白了就是可以把方法当作 ...

  9. poj1236（强连通缩点）

    传送门:Network of Schools 题意:一些学校联接在一个计算机网络上,学校之间存在软件支援协议,每个学校都有它应支援的学校名单(A学校支援学校B,并不表示B学校一定支援学校A).当某校获 ...

  10. 组队赛第二场：字符串哈希+DP

    长春现场赛 HDU 4821  思路:这题周赛的时候没做出来,有点可惜了.要是当时记起来unsigned long long自己主动取模,然后提醒一下大帝的话,后续大帝就能过了. 唉,导致让他取了好多 ...