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

最新推荐文章于 2024-04-07 01:14:03 发布

hanyue198528

最新推荐文章于 2024-04-07 01:14:03 发布

阅读量6k

点赞数

文章标签： javascript function div scroll url

本文链接：https://blog.csdn.net/hanyue198528/article/details/4210622

版权

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

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

样式如下

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"></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"></mce:script> </head> <body οnlοad="init()"> <div id="picmove" οnkeydοwn="move()"> <img src="img/role.png" mce_src="img/role.png"> </div> </body> </html>