js运动技术--右侧悬浮框！

旧城等待， 2024-02-17 23:14 116阅读 0赞

目的让一个div悬浮框始终悬浮于页面右下脚：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></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");
    				//scrollTop 起始位置到末位置的滑动高度
    				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滑动宽度/高度
    				//documentElement.clientHeight 页面可视区宽高
    				//oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + 'px';		
    				startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop);
    				//startMove(oDiv.offsetTop + scrollTop);//为什么不行?
    			}
    			
    			var timer = null;
    			function startMove (iTarget){
    				var oDiv = document.getElementById("div1");
    				clearInterval(timer);
                    timer = setInterval(function(){
    				var speed = (iTarget - oDiv.offsetTop)/20;
    				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>

2、对联悬浮框：

document.documentElement.clientHeight - oDiv.offsetHeight//处以2即可，可能出现一个问题就是，结果为小数，这样就造成在中间位置不断抖动的情况；所以可通过parseInt处理

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></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(parseInt(document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop);
    			}
    			
    			var timer = null;
    			function startMove (iTarget){
    				var oDiv = document.getElementById("div1");
    				var oTx = document.getElementById("txt1");
    				
    				clearInterval(timer);
                    timer = setInterval(function(){
    				var speed = (iTarget - oDiv.offsetTop)/20;
    				speed = speed>0?Math.ceil(speed):Math.floor(speed);         
    				
    				if(oDiv.offsetTop == iTarget){
    					clearInterval(timer);
    				}
    				else{
    					oDiv.style.top = oDiv.offsetTop + speed + 'px';
    					oTx.value = oDiv.style.top;
    				}
                    },30);
    				
    				
    			}
    		</script>
    	</head>
    	<body style="height: 2000px;">
    		<input id = "txt1" type="text" style="position: fixed;top: 0px;right: 0px;"/>
    		<div id = "div1">
    		</div>
    	</body>
    </html>