示例：屏幕右侧悬浮框

原理：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. Linux下的softlink和hardlink（转）

    Linux中包括两种链接:硬链接(hard link)和软链接(soft link),软链接又称为符号链接(symbolic link) 创建命令:ln -s destfile/directory s ...

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

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

  3. winXP JDK由1.8改为1.6

    (1)直接在环境变量中删除配置的相关路径 path的值: C:\Documents and Settings\Administrator>path PATH=C:\Documents and S ...

  4. hdu1428之dfs+spfa

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

  5. 从零开始，使用python快速开发web站点（1）

    环境:ubuntu 12.04 python版本:  2.73 ok,首先,既然是从零开始,我们需要的是一台可以运行的python的计算机环境,并且假设你已经安装好了python, (ubuntu 或 ...

  6. adbetj657k

    http://www.zhihu.com/collection/24337307 http://www.zhihu.com/collection/24337259 http://www.zhihu.c ...

  7. ADN中国团队參加微软的Kinect全国大赛获得三等奖

    上周末我们团队參加了微软的Kinect全国大赛,我们的Kinect + Navisworks漫游荣膺三等奖   团队经理Joe写了篇详实的总结,我就直接转载了. http://blog.csdn.ne ...

  8. 为什么 as sysdba着陆方法oracle数据库，为什么刚刚输入username和password我们都可以登录？

    事实上,这是oracle问题数据库的身份验证方法 该 sqlnet.ora在文件 SQLNET.AUTHENTICATION_SERVICES= (NTS) 变 SQLNET.AUTHENTICATI ...

  9. Android设备管理器漏洞2--禁止用户取消激活设备管理器

    2013年6月,俄罗斯安全厂商卡巴斯基发现了史上最强手机木马-Obad.A.该木马利用了一个未知的Android设备管理器漏洞(ANDROID-9067882),已激活设备管理器权限的手机木马利用该漏 ...

  10. Java程序猿学习当中各个阶段的建议

    回答阿里社招面试如何准备,顺便谈谈对于Java程序猿学习当中各个阶段的建议   引言 其实本来真的没打算写这篇文章,主要是LZ得记忆力不是很好,不像一些记忆力强的人,面试完以后,几乎能把自己和面试官的 ...