js实现浮动框【缓冲效果】

最新推荐文章于 2019-08-30 17:03:33 发布

壹间show

最新推荐文章于 2019-08-30 17:03:33 发布

阅读量1.3k

点赞数

分类专栏：浅谈javascript 前端杂文文章标签： js悬浮窗口缓冲浮动跟随鼠标下滑效果

本文链接：https://blog.csdn.net/xpf_show/article/details/36035421

版权

前端杂文同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

浅谈javascript

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 <head>
 	<meta charset='utf-8'/>
 	<title>右侧缓动悬浮宽</title>
 	<style type="text/css">
      #f_fix{width: 100px;height: 150px;background: #808080;position: absolute;right: 0;}
 	</style>

 </head>
 <body style="height:2000px;">
 	<div id="f_fix"></div>

    <script type="text/javascript">
      window.οnscrοll=function()
      {
       
       var oDiv=document.getElementById('f_fix');
       var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
       startMove(document.documentElement.clientHeight-oDiv.offsetHeight*1.5+scrollTop);
  
      };

      var timer=null;
      function startMove(iTarget)
      {
       clearInterval(timer);
       timer=setInterval(
        function(){
        	var oDiv=document.getElementById('f_fix');
        	var speed=(iTarget-oDiv.offsetTop)/6;
        	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>
 </body>
</html>

壹间show

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现浮动框【缓冲效果】

右侧缓动悬浮宽 #f_fix{width: 100px;height: 150px;background: #808080;position: absolute;right: 0;} window.onscroll=function() { var oDiv=document.getEleme
复制链接

扫一扫