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

JavaScript传说中的图片截取（只显示一张图片的某个部分）

2009-05-23 13:21 417 查看

我们需要截取图片的一部分（也就是把图片的其他部分隐藏）

我们可以把这张图片放到一个层中，通过控制层的大小从而控制将要显示的区域大小，

样式如下

div{
position:absolute;
width:32px; //宽度
height:48px;//高度
overflow:hidden;//其他部分隐藏
}

然后在函数（function）里通过scrolltop控制将要显示图片的高度位置，scrollLeft控制图片的左位置

eg.

一张4X4的图片宽320 搞400

那么要显示位置（1，1）的scrollTop=0；scrollLeft=0;

(2,2)的scrollTop=100；scrollLeft=80;

以此计算；

代码：document.getElementById("层ID").scrollTop=0;

document.getElementById("层ID").scrollLeft=0;

注意上面两句代码与

document.getElementById("层ID").style.scrollTop=0;的区别

显示区域没有style 直接点出scroll**

下面附上一段图片移动变换影藏区域的的代码：

请将图片下载，自己更改下背景以及图片路径和名称

<html>
<head>
<mce:style type="text/css"><!--
body{
background:url(img/shanDong.jpg);

}
div{
position:absolute;
width:32px;
height:48px;
overflow:hidden;
}

--></mce:style><style type="text/css" mce_bogus="1">			body{
background:url(img/shanDong.jpg);

}
div{
position:absolute;
width:32px;
height:48px;
overflow:hidden;
}
</style>
<mce:script type="text/javascript"><!--
var initTop,initLeft;

function init(){
document.getElementById("picmove").style.pixelTop=200;
document.getElementById("picmove").style.pixelLeft=300;
}
var num=1;
function move(){
initTop=document.getElementById("picmove").style.pixelTop;
initLeft=document.getElementById("picmove").style.pixelLeft;
if(event.keyCode==37){

document.getElementById("picmove").style.pixelLeft=initLeft-2;
document.getElementById("picmove").scrollTop=48;
document.getElementById("picmove").scrollLeft=num*32;

}else if(event.keyCode==38){

document.getElementById("picmove").style.pixelTop=initTop-2;
document.getElementById("picmove").scrollTop=144;
document.getElementById("picmove").scrollLeft=num*32;

}else if(event.keyCode==39){
document.getElementById("picmove").style.pixelLeft=initLeft+2;
document.getElementById("picmove").scrollTop=96;
document.getElementById("picmove").scrollLeft=num*32;

}else if(event.keyCode==40){
document.getElementById("picmove").style.pixelTop=initTop+2;
document.getElementById("picmove").scrollTop=0;
document.getElementById("picmove").scrollLeft=num*32;
}
num++;
if(num==4){num=1;}
}
document.onkeydown=move;

// --></mce:script>
</head>
<body onload="init()">
<div id="picmove" onkeydown="move()">
<img src="img/role.png" mce_src="img/role.png">
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航