在一个方框内上下左右移动图片
2015-10-16 本文已影响500人
一个想进步的小白
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
border: 1px solid red;
position: relative;
}
img{
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div>
<img src="1.jpg" alt="">
</div>
<table>
<tr>
<td></td>
<td><button value="up">向上</button></td>
<td></td>
</tr>
<tr>
<td><button value="left">向左</button></td>
<td></td>
<td><button value="right">向右</button></td>
</tr>
<tr>
<td></td>
<td><button value="down">向下</button></td>
<td></td>
</tr>
</table>
<script>
window.onload=function(){
var img = document.getElementsByTagName('img')[0];
var imgStyle = document.styleSheets[0].rules[1];//html中第一个css链接中的第二个css选择器。
var imgTop = parseInt(imgStyle.style.top);
var imgLeft = parseInt(imgStyle.style.left);
var imgWidth = parseInt(imgStyle.style.width);
var imgHeight = parseInt(imgStyle.style.height);
//div的宽和高
var div = document.getElementsByTagName("div")[0];
var divStyle = document.styleSheets[0].rules[0];/html中第一个css链接中的第一个css选择器。
var divWidth = parseInt(divStyle.style.width);
var divHeight = parseInt(divStyle.style.height);
var button = document.getElementsByTagName("button");
//增加onclick事件
for(var i in button){
button[i].onclick = Move;
}
function Move(){
if(this.value == "up"){
if(imgTop == 0){
window.alert("已经到达顶部，不能再向上移动了！");
}else{
imgTop = imgTop - 100;
}
}else if(this.value == "down"){
if((imgTop+imgHeight) == divHeight){
window.alert("已经到达底部，不能再向下移动了！");
}else{
imgTop = imgTop + 100;
}
}else if(this.value == "left"){
if(imgLeft == 0){
window.alert("已经到达左边边界，不能再向左移动了！");
}else{
imgLeft = imgLeft - 100;
}
}else if(this.value == "right"){
if((imgLeft+imgWidth) == divWidth){
window.alert("已经到达右边边界，不能再向右移动了！");
}else{
imgLeft = imgLeft + 100;
}
}
imgStyle.style.top = imgTop + "px";
imgStyle.style.left = imgLeft + "px";
}
}
</script>
</body>
</html>
** 初始效果预览： **
捕获.JPG
遇到的问题：
1.button[i].onclick = Move;此处不能用Move(),否则会调用Move()函数。
2.利用parseInt函数即可从"100px"中提取出数字100。
- 有四个按钮，onClick事件都增加的是Move()函数，在其中使用this关键字即可获得是哪个button调用的Move()，从而获得value属性。而不用分别为每个按钮增加一个单独的函数。
4.使用document.styleSheets可访问外部css。
