html实现图片切割,利用CSS切割图片技术来动态显示图片

利用CSS切割图片来切换图片

.img2

{

position:absolute;

clip:rect(0px 20px 20px 0px);

}

.img1

{

position:absolute;

clip:rect(0px 60px 60px 20px);

left:-11px

}

function switchimgcss(obj)

{

//document.getElementById("img_css").className

//document.getElementById("img_css").className="img1"

if (obj.className=="img1")

{

obj.className="";   //该语句不能省略

obj.className="img2";

}

else{

obj.className="";

obj.className="img1";

}

}

clip 属性用于剪切图片：

css通过控制显示图片的位置来实现图片的剪切

clip:rect(y1 y1 x2 x1)吧

y1=定位的y坐标(垂直方向)的起点

x1=定位的x坐标(水平方向)的起点

y2=定位的y坐标(垂直方向)的终点

x2=定位的x坐标(水平方向)的终点

注:坐标的起点是在左上角