JS悬浮浮动的简单例子
本节内容：
JS实现侧悬浮浮动
思路分析：
首先，加载onscroll控制滚动条。
然后，写缓存运动的方法，缓冲运动的方法是先计算出DIV缓冲的速度，并且将其取整，再进行运动判断什么时候到达终点。
最后将其参数返回。再在onscroll里面调用此方法，并且将终点计算出来赋予此方法的参数。
例子：
<title>JS悬浮浮动-www.jquerycn.cn</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'); // www.jquerycn.cn
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>
您可能感兴趣的文章：
JS右下角悬浮广告代码的简单示例
JS悬浮广告代码的简单例子
JS悬浮浮动的简单例子
js实现可关闭的悬浮层的代码
js 固定悬浮效果的代码分享
JS悬浮移动窗口(悬浮广告)的特效代码
js 两侧悬浮广告的简单示例代码
js制作的鼠标悬浮时产生的下拉框效果
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
jquery.Jwin.js 基于jquery的弹出层插件代码