js右侧悬浮框
示例：屏幕右侧悬浮框
原理：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右侧悬浮框的更多相关文章
- JS错误记录 - 右侧悬浮框 - 缓冲运动
本次练习错误总结: 1. 正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...
- [Javascript]右侧悬浮框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js实现悬浮框滑动动画
最近在做个人博客想做个相册,鼠标悬浮后出现个div并且鼠标移动到哪个相册,div跟随到哪个相片上. <!DOCTYPE html> <html lang="en" ...
- js实现页面悬浮框
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE ht ...
- 菜鸟学JS（三）——自动隐藏的悬浮框
今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...
- （41）JS运动之右側中间悬浮框（对联悬浮框）
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- JavaScript侧边悬浮框
<script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...
- HTML5气泡悬浮框(已经加上完整文件)
源文件链接:http://pan.baidu.com/s/1pKHlNSn 设计气泡悬浮框 1.在网页设计中,气泡悬浮框常常用于页面中为某些对象显示提示信息,恰当地使用气泡悬浮框能够使网页布局更加完美 ...
- Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框
问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
随机推荐
- UVa 10286 - Trouble with a Pentagon
题目:如图在正五边形中画一个正方形,一直正五边形边长,求正方形边长. 分析:计算几何,解析几何.求出边长的比例关系带入求解就可以. 设正五边形边长为1,在顶点建立直角坐标系,则左上角坐标为:B(-co ...
- java Process在windows的使用汇总(转)
最常用的是ant(java工程中流行),maven,及通用的exec(只要有shell脚本如.sh,.bat,.exe,.cmd等).而其实前两者不容易出错,后者却遇到了以下问题:Caused by: ...
- DIV固定在页面某个位置，不随鼠标滚动而滚动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...
- Amazon.com : The Odyssey of the Manual Toothbrusher
Amazon.com : The Odyssey of the Manual Toothbrusher The Odyssey of the Manual Toothbrusher
- 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 ...
- hdu1881（贪心+dp）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1881 分析:按照结束时间从小到大排序,然后以每个结束点为容量进行01背包,选入的必定符合条件的. 因为 ...
- ZOJ 1584：Sunny Cup 2003 - Preliminary Round（最小生成树&&prim）
Sunny Cup 2003 - Preliminary Round April 20th, 12:00 - 17:00 Problem E: QS Network In the planet w-5 ...
- Linux内核——进程管理与调度
进程的管理与调度 进程管理 进程描写叙述符及任务结构 进程存放在叫做任务队列(tasklist)的双向循环链表中.链表中的每一项包括一个详细进程的全部信息,类型为task_struct,称为进程描写叙 ...
- ibatis dynamic的用法
<select id="idididid" resultClass="java.uitl.HashMap" parameterClass="ja ...
- 完美去除WPF按钮的边框
主页面背影图片, 添加5个功能按钮,并设置按钮的Background和BorderBrush为Transparent,好像没有问题,运行效果 不仅有一个发光的边框,而且当鼠标经过时,按钮就不在透明, ...