js右侧悬浮框
2024-10-20 01:33:25
示例:屏幕右侧悬浮框
原理: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);
最新文章
- thrift笔记
- 如何装出高逼格的64位win7系统
- postgres中的中文分词zhparser
- SNMP协议
- linux &#160; 截取时间段的日志
- POJ 2318 (叉积) TOYS
- flask开发restful api系列(4)--七牛图片服务
- Oracle表锁住处理
- Eclipse的Java工作集和多工程构建路径
- OpenGL: Rotation vector sensor of Android and Device motion of iOS
- 微信小程序学习笔记
- 微信小程序小结
- html_jQuery
- JavaSE学习(二):进制转换—数据类型转换—Java运算符
- OpenRefine
- Docker镜像原理
- 详述 IntelliJ IDEA 插件的安装及使用方法
- vue+Element-ui实现分页效果
- Scala入门4(_的用法)
- HTML5 UI 控件Mobiscroll的使用(年月日三级联动)
热门文章
- That&#39;s life,多一些韧性,才有更多的任性(转)
- activity_main.xml: java.lang.NullPointerException
- STL 源代码分析 算法 stl_algo.h -- includes
- Java创建、重命名、删除文件和文件夹(转)
- OpenStack25
- VSTO学习笔记(九)浅谈Excel内容比较
- sql server数据库保存图片或者其他小文件
- 再读TCP/IP网络7层协议
- Java正則表達式演示样例
- shell 脚本之if、for、while语句