右侧浮动菜单

最新推荐文章于 2023-03-11 10:26:32 发布

fedawn

最新推荐文章于 2023-03-11 10:26:32 发布

阅读量1.3k

点赞数

分类专栏： javascript 代码文章标签： animation function timer xhtml html

本文链接：https://blog.csdn.net/fedawn/article/details/7389101

版权

代码同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

javascript

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>右侧浮动菜单</title>
<style type="text/css">
	#floatElement{ position:absolute; right:40px; top:50px; width:150px; height:250px; background:green;}
</style>
<script type="text/javascript">
window.οnlοad=function(){
	
	var timer=null;
	
	window.οnscrοll=function(){
		
		var element=document.getElementById('floatElement');
		var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
		
		animationStarts(element,scrollTop+100);
		
	};
	
	function animationStarts(obj, targetValue){
		
		clearInterval(timer);
		timer=setInterval(function(){
			animation(obj, targetValue)
		},30);
	}
	
	function animation(obj, targetValue){
		var speed=(targetValue-obj.offsetTop)/8;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(targetValue==obj.offsetTop){
			clearInterval(timer);
		}else{
			obj.style.top=obj.offsetTop+speed+'px';
		}
	}
};
	
</script>
</head>

<body style=" height:4000px;">
	<div id="floatElement"></div>
</body>
</html>

fedawn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
右侧浮动菜单

右侧浮动菜单 #floatElement{ position:absolute; right:40px; top:50px; width:150px; height:250px; background:green;}window.onload=function(){ var timer=null; window.onscroll=function(){ var el
复制链接

扫一扫