示例:屏幕右侧悬浮框

原理: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. UVa 10286 - Trouble with a Pentagon

    题目:如图在正五边形中画一个正方形,一直正五边形边长,求正方形边长. 分析:计算几何,解析几何.求出边长的比例关系带入求解就可以. 设正五边形边长为1,在顶点建立直角坐标系,则左上角坐标为:B(-co ...

  2. java Process在windows的使用汇总(转)

    最常用的是ant(java工程中流行),maven,及通用的exec(只要有shell脚本如.sh,.bat,.exe,.cmd等).而其实前两者不容易出错,后者却遇到了以下问题:Caused by: ...

  3. DIV固定在页面某个位置,不随鼠标滚动而滚动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...

  4. Amazon.com : The Odyssey of the Manual Toothbrusher

    Amazon.com : The Odyssey of the Manual Toothbrusher The Odyssey of the Manual Toothbrusher

  5. A Game of Thrones(8) - Bran

    The hunt left at dawn. The king wanted wild boar at the feast tonight. Prince Joffrey rode with his ...

  6. hdu1881(贪心+dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1881 分析:按照结束时间从小到大排序,然后以每个结束点为容量进行01背包,选入的必定符合条件的. 因为 ...

  7. ZOJ 1584:Sunny Cup 2003 - Preliminary Round(最小生成树&amp;&amp;prim)

    Sunny Cup 2003 - Preliminary Round April 20th, 12:00 - 17:00 Problem E: QS Network In the planet w-5 ...

  8. Linux内核——进程管理与调度

    进程的管理与调度 进程管理 进程描写叙述符及任务结构 进程存放在叫做任务队列(tasklist)的双向循环链表中.链表中的每一项包括一个详细进程的全部信息,类型为task_struct,称为进程描写叙 ...

  9. ibatis dynamic的用法

    <select id="idididid" resultClass="java.uitl.HashMap" parameterClass="ja ...

  10. 完美去除WPF按钮的边框

    主页面背影图片, 添加5个功能按钮,并设置按钮的Background和BorderBrush为Transparent,好像没有问题,运行效果 不仅有一个发光的边框,而且当鼠标经过时,按钮就不在透明, ...