按钮控制菜单上下滚动

1人阅读 评论(0) 收藏 举报

        前两天学习了定时器,为了更好地理解,做了几个关于它的小练习。这个练习本来觉得很容易,但是花的调试时间最久,主要的问题就出在高度值的获取上,还有滚动对象的确定。我是利用top值的变化来实现滚动的功能,向上滚动top减小,向下滚动top值增加。获取页面当前的top值通过封装函数实现:


实现top值的变化是通过定时器,定时器所需函数主要是实现相同时间间隔内top变化固定的值:


需要注意的是z-index和overflow的正确运用

实现效果:


代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>按钮控制菜单的上下滚动</title>
	<style type="text/css">
	#contain{
		width: 300px;
		height: 500px;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
	}	
	.head{
		width: 280px;
		height: 30px;
		line-height: 30px;
		padding:0 10px;
		background: blue;
		border-radius: 10px 10px 0 0;
		z-index: 10; 
	}
	#up,#down{
		width: 300px;
		height: 30px;
		background: #617786;
		text-align: center;
		line-height: 30px;
		position: absolute;
		cursor: pointer;
		z-index: 2;
	}
	#up{
		top: 30px;
		z-index: 10;
	}
	#down{
		top: 470px;
	}
	#content{		
		height: 410px;
		position: absolute;
		top: 60px;	
		z-index: -1;		
	}
	#content ul{
		margin: 0;
		padding: 0;
		list-style: none;
		overflow: hidden;
		z-index: -1;
		
	}
	#content ul li{
		width: 300px;
		height: 60px;
		background: #99a7ce;
		overflow: hidden;
		border-bottom: 1px solid #ccc;
		color: white;
		text-align: center;
		line-height: 60px;
		font-size: 20px;
	}
	</style>
</head>
<body>
<div id="contain">
	<div class="head">妙味课堂</div>
	<div id="up">向上滚动</div>
	<div id="content">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
	</div>
	<div id="down">向下滚动</div>
</div>

<script type="text/javascript">
	var cont=document.getElementById('content');
	var up=document.getElementById('up');
	var down=document.getElementById('down');
	var oUl=cont.getElementsByTagName('ul');
	var timer1=null,timer2=null;

	up.onmousedown=function(){
		clearInterval(timer1);
		if(parseInt(getStyle(cont,'top'))>-140)
			timer1=setInterval(function(){	
				var dis=parseInt(getStyle(cont,'top'))-1;
				if(dis<=-140){
					clearInterval(timer1);
				}
				cont.style.top=dis+'px';
			},10);		
	}
	up.onmouseup=function(){
		clearInterval(timer1);
	}
	down.onmousedown=function(){
		clearInterval(timer1);
		clearInterval(timer2);
		if(parseInt(getStyle(cont,'top'))<60)		
			timer2=setInterval(function(){	
				var dis=parseInt(getStyle(cont,'top'))+1;
				if(dis>=60){
					clearInterval(timer2);
				}
				cont.style.top=dis+'px';
			},10);
	}
	down.onmouseup=function(){
		clearInterval(timer2);
	}
	function getStyle(obj ,attr){  
        return obj.currentStyle ? obj.currentStyle[attr] :getComputedStyle(obj ,false)[attr];  
    }  
</script>
</body>
</html>


查看评论

按钮控制电影图片上下滚动

  • super_yang_android
  • super_yang_android
  • 2017-01-13 14:44:03
  • 260

JS按钮控制内容上下滚动

CSS代码: *{ padding: 0; margin: 0;} li{ list-style: none;} a{ text-decoration: none; color: #333;} ...
  • u011175410
  • u011175410
  • 2015-12-05 17:09:24
  • 1004

图片上下滚动带控制按钮,兼容所有浏览器

  • 2011年10月19日 10:08
  • 1KB
  • 下载

shiro安全框架扩展教程--如何动态控制页面节点元素的权限

上些章节我们都学习了如何在shiro
  • shadowsick
  • shadowsick
  • 2014-09-29 10:23:51
  • 15120

jquery文本向上滚动代码带上下翻转按钮的jQuery插件

  • 2015年08月07日 11:38
  • 3KB
  • 下载

jquery 文字滚动大全 单行滚动 多行滚动 带按钮控制滚

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> jquer...
  • hupan_2014
  • hupan_2014
  • 2015-09-11 15:56:43
  • 1893

使用angular 实现简单 用户-角色-菜单-按钮权限控制

使用angular 实现简单 用户-角色-菜单-按钮权限控制
  • ios_king
  • ios_king
  • 2016-12-28 20:04:26
  • 2800

后台权限管理控制shiro+jsonMenu

在学习后台的权限控制,自己参考了各种资料后的新手demo,ui框架选型为大家可以参照网上的,项目架构为spring mvc + spring+mybatis,简单易用好上手!搭建好框架后开始了第一个任...
  • u014799292
  • u014799292
  • 2016-04-26 12:26:45
  • 12673

设置按钮和菜单快捷键

设置名称内的某个字幕// 设置 Alt + C 为快捷键 // 适用于 QAbstractButton 和 QAction 的子类 QCheckBox *checkbox = new QCheckBo...
  • qq_35488967
  • qq_35488967
  • 2017-07-30 12:24:15
  • 168

jquery上下循环滚动插件 控制li上下循环滚动

/** * * jQuery scrollQ plugin li上下滚动插件 * @name jquery-scrollQ.js * @author Q * @date 2012-...
  • keyunq
  • keyunq
  • 2012-03-23 17:58:21
  • 13842
    个人资料
    等级:
    访问量: 1299
    积分: 92
    排名: 142万+
    文章分类
    文章存档