右侧浮动菜单
来源：互联网 发布：盛世网络传奇 编辑：程序博客网 时间：2024/04/28 08:17
<!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>
