87,902
社区成员
发帖
与我相关
我的任务
分享一个网页元素移动位置的问题
网页上显示样子如下 ：
标签A 标签B 标签C 标签x...
向左按钮 向右按钮
标签在ul中，每个标签都在一个li中，在ul的外层是div(设置overflow: hidden;)
现要求在网页上增加一个向左按钮一个向右按钮，点击按钮使ul在div中分别向左或向右移动。
标签A 标签B 标签C 标签x...
向左按钮 向右按钮
标签在ul中，每个标签都在一个li中，在ul的外层是div(设置overflow: hidden;)
现要求在网页上增加一个向左按钮一个向右按钮，点击按钮使ul在div中分别向左或向右移动。
...全文
请发表友善的回复…
发表回复
varlj 2008-10-08
- 打赏
- 举报
比较简单的实现
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div{overflow:hidden;width:400px;height:200px;border:solid 1px #000;}
ul{margin:0;padding:0;}
li{float:left;background-color:#aaa;margin:1px;}
</style>
</head>
<body>
<div>
<ul id="list">
<li>00001</li>
<li>00002</li>
</ul>
</div>
<button onclick="fun(-5)">向左</button>
<button onclick="fun(5)">向右</button>
<script type="text/javascript">
var left = 0;
function fun(offset)
{
var ul = document.getElementById("list");
left += offset;
ul.style.marginLeft = left+"px";
}
</script>
</body>
</html>
cloudgamer 2008-10-08
- 打赏
- 举报
