JS实现右侧悬浮框效果
更新时间：2022年03月31日 10:28:18 作者：大橙子啊啊啊啊
这篇文章主要为大家详细介绍了JS实现右侧悬浮框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现右侧悬浮框效果的具体代码，供大家参考，具体内容如下
让一个div始终悬浮在右下角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 100px;
height: 150px;
background: red;
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
<script>
window.onscroll = function(){
var oDiv = document.getElementById('div1');
var scrollTop =document.documentElement.scrollTop||document.body.scrollTop;//浏览器兼容
startmove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop)
// document.documentElement.clientHeight 页面可视区高度
}
var timer = null;
//悬浮框缓冲运动
function startmove(iTarget){
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function(){
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>
</head>
<body style="height:2000px">
<div id="div1"></div>
</body>
</html>对联悬浮
让div悬浮在右侧中间
只需要更改start move()函数中的数据
startmove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight )/2)+ scrollTop)//对联悬浮
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
排序算法的理解算是程序员的基本功之一了，其功能是对一个数据元素集合或序列重新排列成一个按数据元素某个项值有序的序列。2011-02-02
reduce方法在数组的每个元素上执行用户提供的回调函数,即"reducer",它传入对前一个元素进行计算的返回值,结果是单个值,它是在数组的所有元素上运行reducer的结果,下面这篇文章主要给大家介绍了关于JavaScript数组reduce常见实例方法的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟) 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
本文主要分享了canvas实现简易的圆环进度条效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了Javascript实现飞动广告效果的方法,可实现广告窗口的浮动显示效果,且广告窗口具有关闭功能,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了BootstrapValidator超详细教程(推荐)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
Attribute是属性的意思，文章仅对部分兼容IE和FF的Attribute相关的介绍。具体内容详情大家参考下本文2017-04-04
这篇文章主要介绍了js尾调用优化的实现，尾调用（Tail Call）是函数式编程的一个重要概念，本文介绍它的含义和用法。感兴趣的可以了解一下2019-05-05
这篇文章主要为大家详细介绍了微信小程序实现换肤功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-03-03
本文是司徒正美的《javascript框架设计》的第三章第一节的读书笔记，简单介绍了javascript字符串的扩展和修复，小伙伴们参考下吧2014-12-12
最新评论