基于JS实现页面悬浮框的实例代码
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.
当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
height:2000px;
}
.div2 {
width:100%;
height:35px;
background-color:#3399FF;
margin-top:100px;
}
.div2_1{
position:fixed;
width:100%;
height:35px;
z-index:999;
background-color:#3399FF;
top:0px;
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}
.div2_2
{
display:none;
}
</style>
<script type="text/javascript">
window.onscroll=function(){
var t=document.documentElement.scrollTop||document.body.scrollTop;
var div2=document.getElementById("div2");
if(t>= 100){
div2.className = "div2_1";
}else{
div2.className = "div2";
}
}
</script>
</head>
<body>
<div class="div1">
<div id="div2" class="div2"></div>
</div>
</body>
</html>
补充：JavaScript实现右侧悬浮框
HTML代码：
<body> <div id="div1"> </div> </body>
css代码：
#div1{
height:150px;
width:100px;
background:red;
position:absolute;
right:0px;
bottom:0px;
}
body{
height:2000px;
}
javascript代码
//当窗体滚动的时候滴呀
window.onscroll=function (){
var obj=document.getElementById("div1");
//考虑到浏览器的兼容性滴呀(被卷去的高度)
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
//浏览器可视区域的高度+物体自身的高度+被卷曲的高度
// obj.style.top=document.documentElement.clientHeight-obj.offsetHeight+scrollTop+'px';
//var targetLen=document.documentElement.clientHeight-obj.offsetHeight+scrollTop;
//move(targetLen);
//这样我们就完成了基本的人物我滴
//方式二：结果他是要抖动滴呀
//var targetLen=(document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop;
//move(targetLen);
var targetLen=parseInt((document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop);
move(targetLen);
//这样我们的基本功能算是实现了滴呀
}
//这里我们俩加上一个缓冲运动滴呀，这样才方便我们去这些事情滴呀
var Timer=null;
function move(iTarget){
clearInterval(Timer);//先清除
var obj=document.getElementById("div1");
Timer=setInterval(function (){ //距离上面物体的距离滴呀
var speed=(iTarget-obj.offsetTop)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//先获取我们的速度滴呀
if(obj.offsetTop==iTarget){
clearInterval(timer); //到达目的之后，我们就清除元素滴呀
}else{
obj.style.top=obj.offsetTop+speed+'px';
}
},30)
//来进行我们饿缓冲运动滴呀
}
到此这篇关于基于JS实现页面悬浮框的实例代码的文章就介绍到这了,更多相关js页面悬浮框内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有浏览器兼容! html代码如下: <div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis"> 用CSS实现超长字段被省略的简单方法
-
js和css写一个可以自动隐藏的悬浮框
今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天要说的就是通过控制其大小来实现元素的显隐,原理:为其注册鼠标移入.移出的事件,当鼠标移出对象范围,将其宽度设为1,当鼠标再次移入该对象,将其宽度还原.很简单,我们一起看看吧! 隐藏状态: 左边那一条窄线就是隐藏以后的悬浮框. 显示状态: 当鼠标滑到左边的悬浮框上,悬浮框就又显示出来了. CSS样式:
-
基于JS实现页面悬浮框的实例代码
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .div1 { height:2000px; } .div2 { width:100%; height:35
-
基于JS实现checkbox全选功能实例代码
需求:要求实现点击全选选中所有菜单,再次点击全选取消选中.此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l
-
基于JS实现前端压缩上传图片的实例代码
具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>前端压缩上传图片</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body>
-
基于JS开发微信网页录音功能的实例代码
具体代码如下所示: wx.ready(function () { var startRecordflag = false var startTime = null //btnRecord 为录音按钮dom对象 btnRecord.addEventListener('touchstart', function (event) { event.preventDefault(); startTime = newDate().getTime(); // 延时后录音,避免误操作 recordTimer =
-
JS实现右侧悬浮框效果
本文实例为大家分享了JS实现右侧悬浮框效果的具体代码,供大家参考,具体内容如下 让一个div始终悬浮在右下角 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{
-
js实现鼠标悬浮框效果
本文实例为大家分享了js实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
基于 Immutable.js 实现撤销重做功能的实例代码
浏览器的功能越来越强大,许多原来由其他客户端提供的功能渐渐转移到了前端,前端应用也越来越复杂.许多前端应用,尤其是一些在线编辑软件,运行时需要不断处理用户的交互,提供了撤消重做功能来保证交互的流畅性.不过为一个应用实现撤销重做功能并不是一件容易的事情. Redux官方文档中 介绍了如何在 redux 应用中实现撤销重做功能.基于 redux 的撤销功能是一个自顶向下的方案:引入 redux-undo 之后所有的操作都变为了「可撤销的」,然后我们不断修改其配置使得撤销功能变得越来越好用(这也是 r
-
基于Angular.js实现的触摸滑动动画实例代码
先上图: 这个主要用到是angular-touch.js中封装好的ng-swipe-left,ng-swipe-right,向左或向右的触摸事件.结合css3的transition实现的动画.ng-class为切换写好的动画的className. <!DOCTYPE HTML> <html ng-app="myapp"> <head> <meta http-equiv="content-type" content="
-
基于JS递归函数细化认识及实用实例(推荐)
程序调用自身的编程技巧称为递归( recursion). 一个过程或函数在其定义或说明中又直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算,大大地减少了程序的代码量.递归的能力在于用有限的语句来定义对象的无限集合.用递归思想写出的程序往往十分简洁易懂. 一般来说,递归需要有边界条件.递归前进段和递归返回段.当边界条件不满足时,递归前进:当边界条件满足时,递归返回. 注意: (1)