怎么利用JS创建右侧悬停框效果-群英

您现在的位置是：群英 > 开发技术 > web开发

怎么利用JS创建右侧悬停框效果

Admin发表于 2022-05-26 17:09:42644 次浏览

上一篇： JS实现鼠标悬停框的方法和代码是什么

下一篇：百度搜索框和选项框如何利用JS来实现

这篇文章主要介绍了title，小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望大家通过这篇文章可以有所收获。

本文实例为大家分享了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)//对联悬浮

现在大家对于怎么利用JS创建右侧悬停框效果的内容应该都清楚了吧，希望大家阅读完这篇文章能有所收获。最后，想要了解更多怎么利用JS创建右侧悬停框效果的知识，欢迎关注群英网络，群英网络将为大家推送更多相关知识点的文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： js,悬浮框

上一篇： JS实现鼠标悬停框的方法和代码是什么

下一篇：百度搜索框和选项框如何利用JS来实现