中间or底部浮动(用到Math)

最新推荐文章于 2024-06-30 09:01:55 发布

遊愙

最新推荐文章于 2024-06-30 09:01:55 发布

阅读量280

点赞数

文章标签： JavaScript 页面浮动广告

本文链接：https://blog.youkuaiyun.com/baidu_37639000/article/details/71512829

版权

本文介绍了一种在网页中实现元素浮动的方法，包括中间浮动和底部浮动。通过JavaScript计算元素位置，并利用CSS进行布局，实现了元素随页面滚动而平滑移动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类似广告的中间或底部浮空模块
中间浮动时计算target
scrollTop：当前区域顶部距离body顶部距离，注意兼容(详见代码)；
cilentHeight:可视区域高度；
half：(clientHeight-odiv.offsetHeight)/2;
target:scrollTop+half;

      <style type="text/css">
        *{margin:0; padding:0;}
        body{height:2000px; }
        #div1{width:100px; height:100px; background:red; 
          position:absolute; right:0; }
    </style>
 <body>
   <div id="div1"> </div>
 </body>
 <script type="text/javascript">
 <!--
    var odiv1=document.getElementById("div1");
    var timer;
    var speed;

    window.onscroll=function(){
        console.log("..........................."); 
//  注意兼容  
      var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
//    console.log("scrollTop  "+scrollTop);

//    clientHeight 可视区域高度 当滚动条在最底部 可视高度+scrollTop=body高度
      var hview=document.documentElement.clientHeight;
//    half  (可视部分高度-odiv高度)/2  避免小数用parseInt() 转换
      var half=parseInt((hview-odiv1.offsetHeight)/2);    
//    console.log("可视高度  "+document.documentElement.clientHeight);

//    move(scrollTop+half);  // 中间浮动
      move(scrollTop+hview-odiv1.offsetHeight); // 底部浮动


//    下行代码为中间浮动的 target(即odiv1.style.top的位置)
//    scrollTop+half

//    下行代码为底部浮动的 target(即odiv1.style.top的位置)
//    scrollTop+hview-odiv1.offsetHeight    
    } // scroll

    var timer=null;
    var speed=0;
    function move(target){
      clearInterval(timer); //清空定时器
      timer=setInterval(function(){
        if(odiv1.offsetTop==target){
          clearInterval(timer);//到达target停止定时器
        }else{
//  计算缓冲运动速度，注意一定要判定±然后向上/向下取整      
          speed=(target-odiv1.offsetTop)/3;
          speed=speed>0?Math.ceil(speed):Math.floor(speed);
          odiv1.style.top=odiv1.offsetTop+speed+"px";
          console.log("速度"+speed);
        }

      },30); //定时器结束
    } // move
 //-->   
 </script>

常用Math函数：
随机数：Math()*n ，取0~n的随机小数，如果取整可用parseInt( )转换；
向上取整：Math.ceil(float)， -0.1→0 / 0.1→1；
向下取整：Math.floor(float)，-0.1→-1 / 0.1→0；
绝对值：Math.abs(num);
四舍五入取整：Math.round(num);

获取可视区域高度：兼容方式
var scroll=Topdocument.documentElement.scrollTop ||
document.body.scrollTop;

注：div的position定位需注意，当前情况必须是positon:absolute；
缓冲运动speed速度一定要处理取整，±时判断上/下取整(可用三元判断)。