JS右侧悬浮框

最新推荐文章于 2019-07-07 07:25:55 发布

大橙子啊啊啊啊

最新推荐文章于 2019-07-07 07:25:55 发布

阅读量4.4k

点赞数 2

本文链接：https://blog.csdn.net/weixin_43297986/article/details/83270780

版权

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)//对联悬浮

大橙子啊啊啊啊

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫