您的位置：首页 > Web前端 > JavaScript

JS按钮控制内容上下滚动

2015-12-05 17:03 555 查看

运行效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS按钮控制内容上下滚动</title>
<style>
*{ padding: 0; margin: 0;}
li{ list-style: none;}
a{ text-decoration: none; color: #333;}
a:hover{ color: #f00;}
.center{ text-align: center; margin-top: 20px; font-family: "Microsoft Yahei";}
#box{ width: 168px; margin: 20px auto; border: 1px solid #ccc; background: #fff; font-size: 12px; position: relative;}
#up ,#down{ position: absolute; z-index: 2; cursor: pointer; background: #eee; width: 100%; text-align: center; height: 28px; line-height: 28px;}
#up{ top: 0;}
#down{ bottom: 0;}
.content{ margin-top: 28px; height: 475px; overflow: hidden; position: relative; background: #ccc;}
#wrap{ position: absolute; top: 0;}
#wrap ul{ padding: 0 10px;}
#wrap li{ width: 148px; height: 100px; background: purple; margin-top: 10px;}
</style>
</head>
<body>
<h3 class="center">先向上滚动试试，然后向下滚动试试</h3>
<div id="box">
<a id="up" href="javascript:;">向上滚动</a>
<a id="down" href="javascript:;">向下滚动</a>
<div class="content">
<div id="wrap">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<script>
// 封装getStyle函数
function getStyle(obj ,attr){
return obj.currentStyle ? obj.currentStyle[attr] :getComputedStyle(obj ,false)[attr];
}

window.onload = function(){
var oBox = document.getElementById('box');
// alert(getStyle(oBox,'width'))        // 168px
var oUp = document.getElementById('up');
var oDown = document.getElementById('down');
var oWrap = document.getElementById('wrap');
var num = 0;
var timer = null;

// 鼠标按下向上链接，开启定时器
oUp.onmousedown = function(){
oWrap.timer = setInterval(function(){
// 先获取内容的top值[获取的是字符串，所以要用parseInt转换成数字]，然后让它每隔300ms减少5px使之向上运动
var dis = parseInt(getStyle(oWrap,'top')) - 5;
// 这里的200是根据当前案例设置的，可以根据实际情况调整数值
if( dis < -220){
dis = -220;
}
oWrap.style.top = dis + 'px';
},30);
};

// 鼠标移开向上链接，关闭定时器
oUp.onmouseup = function(){
clearInterval(oWrap.timer);
};

// 鼠标按下向下链接，开启定时器
oDown.onmousedown = function(){
oWrap.timer = setInterval(function(){
var dis = parseInt(getStyle(oWrap,'top')) + 5;
if(dis > 0){
dis = 0;
}
oWrap.style.top = dis + 'px';
},30);
};

// 鼠标移开向下链接，关闭定时器
oDown.onmouseup = function(){
clearInterval(oWrap.timer);
};
};
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航