耀极客论坛

 找回密码
 立即注册
查看: 487|回复: 0

基于JS实现页面悬浮框的实例代码

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220553
发表于 2022-5-8 02:44:33 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了基于JS实现页面悬浮框的实例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.
  当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示.
  1. ‹!DOCTYPE html>
  2. ‹html>
  3. ‹head>
  4. ‹title>‹/title>
  5. ‹style type="text/css">
  6. .div1 {
  7.     height:2000px;
  8. }
  9. .div2 {
  10.     width:100%;
  11.     height:35px;
  12.     background-color:#3399FF;
  13.     margin-top:100px;
  14. }
  15. .div2_1{
  16.     position:fixed;
  17.     width:100%;
  18.     height:35px;
  19.     z-index:999;
  20.     background-color:#3399FF;
  21.     top:0px;
  22.     _position:absolute;
  23.     _bottom:auto;
  24.     _top:expression(eval(document.documentElement.scrollTop));
  25. }
  26. .div2_2
  27.     {
  28.         display:none;
  29.     }
  30. ‹/style>
  31. ‹script type="text/javascript">
  32. window.onscroll=function(){
  33.     var t=document.documentElement.scrollTop||document.body.scrollTop;  
  34.     var div2=document.getElementById("div2");
  35.     if(t>= 100){
  36.         div2.className = "div2_1";
  37.     }else{
  38.         div2.className = "div2";
  39.     }
  40. }
  41. ‹/script>
  42. ‹/head>
  43. ‹body>
  44. ‹div class="div1">
  45.     ‹div id="div2" class="div2">‹/div>
  46. ‹/div>
  47. ‹/body>
  48. ‹/html>
复制代码
  补充:JavaScript实现右侧悬浮框
  HTML代码:
  1. ‹body>
  2.   ‹div id="div1">
  3.   ‹/div>
  4. ‹/body>
复制代码
  css代码:
  1. #div1{
  2.     height:150px;
  3.     width:100px;
  4.     background:red;   
  5.     position:absolute;
  6.     right:0px;
  7.     bottom:0px;
  8. }
  9. body{
  10.     height:2000px;
  11. }
复制代码
  javascript代码
  1. //当窗体滚动的时候滴呀
  2.   window.onscroll=function (){
  3.       var obj=document.getElementById("div1");
  4.       //考虑到浏览器的兼容性滴呀(被卷去的高度)
  5.       var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
  6.                     //浏览器可视区域的高度+物体自身的高度+被卷曲的高度
  7.      // obj.style.top=document.documentElement.clientHeight-obj.offsetHeight+scrollTop+'px';
  8.     //var targetLen=document.documentElement.clientHeight-obj.offsetHeight+scrollTop;
  9.     //move(targetLen);
  10.     //这样我们就完成了基本的人物我滴
  11.     //方式二:结果他是要抖动滴呀
  12.     //var targetLen=(document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop;
  13.     //move(targetLen);
  14.     var targetLen=parseInt((document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop);
  15.     move(targetLen);
  16.     //这样我们的基本功能算是实现了滴呀
  17.   }
  18.   //这里我们俩加上一个缓冲运动滴呀,这样才方便我们去这些事情滴呀
  19.   var Timer=null;
  20.   function move(iTarget){
  21.       clearInterval(Timer);//先清除
  22.       var obj=document.getElementById("div1");
  23.       Timer=setInterval(function (){ //距离上面物体的距离滴呀
  24.            var speed=(iTarget-obj.offsetTop)/4;
  25.            speed=speed>0?Math.ceil(speed):Math.floor(speed);
  26.            //先获取我们的速度滴呀
  27.            if(obj.offsetTop==iTarget){
  28.                clearInterval(timer); //到达目的之后,我们就清除元素滴呀
  29.            }else{
  30.                obj.style.top=obj.offsetTop+speed+'px';
  31.            }
  32.       },30)
  33.       //来进行我们饿缓冲运动滴呀
  34.   }
复制代码
  到此这篇关于基于JS实现页面悬浮框的实例代码的文章就介绍到这了,更多相关js页面悬浮框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 19:10 , Processed in 0.067521 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表