右侧浮动菜单

原创 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>

css控制右侧二维码浮动代码

var MarginLeft =130;    //浮动层离浏览器右侧的距离   var MarginTop = 190;   //浮动层离浏览器顶部的距离   var Width = 20;    ...
  • lizhengnanhua
  • lizhengnanhua
  • 2014年07月31日 09:44
  • 5488

右侧固定浮动图片代码:返回上一级

.lfj_bc{position:fixed;right:0;bottom:200px;}{dede:type2}{/dede:type2}
  • forest_fire
  • forest_fire
  • 2016年03月21日 10:53
  • 554

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

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

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

左侧固定,右侧浮动的菜单样式                $(function () {            $(".left_nav dd").hover(function () { ...
  • zhongqing_fzq
  • zhongqing_fzq
  • 2016年07月06日 14:16
  • 2700

【Android动画九章】-浮动菜单

上几节讨论了各种各样的属性动画,这里将这些知识组合起来,模拟如下图所示的浮动菜单功能。 1.activity_main.xml: ...
  • yayun0516
  • yayun0516
  • 2016年05月15日 18:12
  • 1858

Android 浮动菜单效果控件

Android 浮动菜单效果
  • ITRenj
  • ITRenj
  • 2017年06月14日 14:33
  • 629

css的浮动以及如何清除浮动

css的浮动是经常会在实际中运用到,之前我对浮动的理解就是使用float,除此之外没有深入理解,后来发现对于浮动还是有必要深入理解一下。 css浮动 css的浮动是float属性,该属性没有继承性...
  • belen_xue
  • belen_xue
  • 2017年01月27日 23:28
  • 1374

android中浮动菜单的基本实现

实现浮动菜单的方法很多,这里就简单介绍介绍几种比较常见的方法吧 用PopupMenu实现浮动菜单这种方式比较简单,直接上代码了: 在的java代码中实现构造浮动菜单 这里的getResources(...
  • Reoger
  • Reoger
  • 2016年05月18日 18:17
  • 731

使用浮动和内外边距来完成基本的页面布局

刚入门前端并 自学了一段时间,在学习了Head First HTML与CSS以及看各路网站视频后,对浮动以及内外边距等知识点用 “实战”的方法来进行熟悉与了解。   以下是效果图:   ...
  • togsa
  • togsa
  • 2016年12月15日 17:04
  • 147

Jquery plugin制作:浮动树菜单

(function($){ var defaults ={ x: 0,  //元素右下角x的偏移量 y: -300,//元素右下角y的偏移量 width:150, height:'auto', co...
  • czp11210
  • czp11210
  • 2016年09月20日 09:22
  • 449
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:右侧浮动菜单
举报原因:
原因补充:

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