关闭

右侧浮动菜单

493人阅读 评论(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.onload=function(){
	
	var timer=null;
	
	window.onscroll=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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:36056次
    • 积分:557
    • 等级:
    • 排名:千里之外
    • 原创:29篇
    • 转载:2篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论