JS实现侧悬浮浮动实例代码
效果：
思路：
首先，加载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>
相关文章
这篇文章主要介绍了JavaScript引用类型Array,结合实例形式较为详细的分析了JavaScript数组相关的创建、检测、转换、排序、栈、队列、引用等各种常见操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了JavaScript实现给按钮加上双重动作的方法,可实现文本框元素值添加及页面跳转的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了javascript中动态加载js文件多种解决办法，有需要的朋友可以参考一下2013-11-11
让iframe子窗体取父窗体地址栏参数(querystring)
突然用到，记录一下，对地址栏字符串用正则处理最好，有时间研究一下。 主要是思路。2009-10-10
低代码作为开发工具类的产品，需要有从0到1体系化的教程才可以，而且还得有教师进行辅助。否则，学习低代码是有难度的，入门很难。因为大家习惯了用代码编程，一下子过度到可视化编程，有一个思路上的转变2022-08-08
js中的双感叹号判断。在网上查了些资料，他相当于三元运算符，返回boolean值2013-11-11
这篇文章主要为大家详细介绍了微信小程序实现通讯录列表展开收起，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要介绍了JavaScript中常见的事件用法小结,需要的朋友可以参考下2023-05-05
发个自己写的表格操作类(添加，删除，排序，上移，下移)...2006-11-11
这篇文章主要介绍了微信网页登录逻辑与实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
最新评论