点击按钮移动的div

最新推荐文章于 2022-08-19 16:23:27 发布

原创最新推荐文章于 2022-08-19 16:23:27 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#div #distance #button #function #input #html

本文介绍了一个简单的HTML页面实现，通过四个方向按钮控制一个DIV元素在网页上的移动。该实现利用了JavaScript来调整DIV的位置，展示了基本的网页交互设计。

<html>
<head>
<title>点击按钮移动的div(1.1作品)</title>
</head><BODY>
<input type="button" value="↑" onclick="up()">
<input type="button" value="←" onclick="left()">
<input type="button" value="↓" onclick="down()">
<input type="button" value="→" onclick="right()">
<div id="a" nowrap style="position:absolute; left:5; top:50; width:100; height:40; z-index:1; overflow: auto; overflow:hidden">
壹点壹作品
</div>
<script>
var distance=50;
function left(){
a.style.left= (parseInt(a.style.left) - distance) + "px";
}
function right(){
a.style.left= (parseInt(a.style.left) + distance) + "px";
}
function up(){
a.style.top = (parseInt(a.style.top) - distance) + "px";
}
function down(){
a.style.top = (parseInt(a.style.top) + distance) + "px";
}
</script> </body></html>