示例：屏幕右侧悬浮框

原理：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. SWT可视化设计

    SWT可视化设计,可以使用Google的WindowBuilder. 在Google Code中,搜索WindowBuilder就可以看到路径. 在Eclipse中   Help--->Inst ...

  2. OCA读书笔记(9) - 管理数据同步

    9.Managing Data Concurrency 描述锁机制以及oracle如何管理数据一致性监控和解决锁冲突 管理数据的并发--管理锁数据的不一致:脏读更改丢失幻影读 脏读:数据是指事务T2修 ...

  3. 关于hibernate中多对多关系

    关于多对多关系 数据库:在使用多对多的关系时,我们能够使用复合主键.也能够不使用,直接引入外键相同能够实现. 在数据库中使用多对多关系时,须要一个中间表. 多对多关系中的数据库结构例如以下: 表:Or ...

  4. PHP开发学习门户改版效果图投票

    亲们,PHP开发学习门户上线两个月啦,站长想进行一次改版.希望大家在留下宝贵的一票.选出喜欢的样式吧 A样式: B样式: mod=misc&action=votepoll&fid=46 ...

  5. 最佳新秀SSH（十三）——Spring集装箱IOC分析和简单的实现

    时间最近一段时期,"集装箱"这个词一直萦绕在我的耳边,连吃饭.睡在我的脑海里蹦来蹦去的. 由于这几天的交流时间.讨论,对于理解容器逐渐加深. 理论上的东西终归要落实到实践,今天就借 ...

  6. 从零开始学C++之继承（一）：公有/私有/保护继承、overload/overwrite/override之间的区别

    一.继承 C++很重要的一个特征就是代码重用.在C语言中重用代码的方式就是拷贝代码.修改代码.C++可以用继承或组合的方式来重用.通过组合或继承现有的的类来创建新类,而不是重新创建它们. 继承是使用已 ...

  7. cf-#189-div 2

    A题: 从前往后暴搜就OK: B题: 每次询问的时候都bfs一次 C题: 异或运算,从后往前运算. -------------分割线--------------------- D题:对于第K个人来说, ...

  8. Android监控程序本身被卸载方法汇总

    本文章由Jack_Jia编写,转载请注明出处.   文章链接: http://blog.csdn.net/jiazhijun/article/details/10157901 作者:Jack_Jia ...

  9. gulp快速入门

    gulp快速入门 因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话如果真是要完整打包上线也不在乎那么几秒时间,对于项目 ...

  10. 前后端分离Web项目中，RBAC实现的研究

    在前后端分离Web项目中,RBAC实现的研究   最近手头公司的网站项目终于渐渐走出混沌,走上正轨,任务也轻松了一些,终于有时间整理和总结一下之前做的东西. 以往的项目一般使用模板引擎(如ejs)渲染 ...