右侧浮动菜单

原创 2012年03月23日 23:56:16
<!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>

相关文章推荐

左侧固定菜单,右侧浮动菜单样式示例代码

左侧固定,右侧浮动的菜单样式                $(function () {            $(".left_nav dd").hover(function () { ...

右侧浮动QQ

  • 2013年07月02日 01:29
  • 6KB
  • 下载

jquery实现右侧固定浮动板块代码

  • 2015年04月09日 08:25
  • 51KB
  • 下载

网页HTML右侧浮动DIV层广告或在线客服图片框最佳代码(支持Firefox&IE)

网页HTML右侧浮动DIV层广告或在线客服图片框最佳代码,支持 firefox和IE,已经过测试 这里放置浮动层的内容,可以放图片或在线咨询客服的相关东西. var Mar...

浮动窗口(右侧)

  • 2013年12月03日 12:14
  • 83KB
  • 下载

display:table-cell实现左侧浮动右侧自适应+等高布局

1.display:table-cell实现左侧浮动右侧自适应实现效果: 实现代码: ...

Jquery 右侧浮动

  • 2013年12月06日 16:13
  • 60KB
  • 下载

仿百度新闻首页右侧浮动二维码扫描

百度新闻右侧的浮动二维码扫描的效果感觉不错,在这里给出源码~~可以自己改动     注入木马的APK(测试端)点击或扫描下载 #header.for-ipad-style{ ba...
  • zeq9069
  • zeq9069
  • 2013年08月14日 16:24
  • 1505
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:右侧浮动菜单
举报原因:
原因补充:

(最多只允许输入30个字)