怎么利用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)//对联悬浮

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！