点滴积累【JS】---JS小功能(JS实现侧悬浮浮动)
2024-10-19 11:40:08
效果:
思路:
首先,加载onscroll控制滚动条。然后写缓存运动的方法,缓冲运动的方法是先计算出DIV缓冲的速度,并且将其取整,再进行运动判断什么时候到达终点。最后将其参数返回。再在onscroll里面调用此方法,并且将终点计算出来赋予此方法的参数。
代码:
<head runat="server">
<title></title>
<style type="text/css">
#div1
{
width: 200px;
height: 200px;
background: #0000FF;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<script type="text/javascript">
window.onscroll = function () {
var oDiv = document.getElementById('div1');
var DivScroll = document.documentElement.scrollTop || document.body.scrollTop; //获取移动高度
// oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + DivScroll + 'px';
move(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + DivScroll)); //调用传参,其中里面的参数是DIV要走的终点。也就是(可视高度-DIV高度)/2+移动高度
}; var timer = null;
function move(end) {
clearInterval(timer); //首先,先关闭之前如果有开启的setInterval;
timer = setInterval(function () {
var oDiv = document.getElementById('div1');
var speed = (end - oDiv.offsetTop) / 5; //计算DIV要走的速度,DIV要走的速度就等于(终点-offsetTop高度)/缩放系数
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //为了避免小数,将其取整
if (oDiv.offsetTop == end) { //当DIV到达终点,则关闭setInterval;
clearInterval(timer);
}
else {
oDiv.style.top = oDiv.offsetTop + speed + 'px'; //移动div
}
}, 30);
}
</script>
</head>
<body style="height: 1000px;">
<div id="div1">
</div>
</body>
最新文章
- 设计模式(十一)外观模式(Facade Pattern)
- Html概要及示例(一)
- Objective-C 高性能的循环
- React同构直出原理浅析
- Android intent传递list或对象
- linux嵌入式系统驱动程序的阻塞与异步
- Android(java)学习笔记249:ContentProvider使用之获得系统联系人信息01
- tr 替换删除字符
- #include <;stdint.h>;
- 使用gson和httpclient呼叫微信公众平台API
- 使用hibernate在5秒内插入11万条数据,你觉得可能吗?
- EntityFramework Core Raw Query再叙注意事项
- 如何使用jconsole(英文)
- Spring MVC (JDK8+Tomcat8)
- WebApi 方法的参数类型总结。
- 【转】Android 之最新最全的Intent传递数据方法
- bzoj1206-[HNOI2005]虚拟内存
- 如何让eclipse恢复默认布局
- 6、GNU makefile工程管理学习的一个例子
- 我的Eclipse设置