用js将图片分成m*n个矩形块
这是效果图:
上代码!!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生成图片碎片</title>
<script src="碎片.js"></script>
<link rel="stylesheet" href="碎片.css">
</head>
<body>
<input type="text" value="1" id="m">
<input type="text" value="1" id="n">
<input type="button" value="click" onClick="makeFragments()">
<div id="fragments"></div>
</body>
</html>
css:
@charset "utf-8";
/* CSS Document */
#fragments{
width: 798px;
height: 498px;
}
#fragTable{
width: 798px;
height: 498px;
border-collapse: collapse;
}
JS:
// JavaScript Document
function makeFragments(){
//生成m*n个div元素
var m = document.getElementById("m").value;
var n = document.getElementById("n").value;
var frags = "<table id = 'fragTable' border='0'>";
for(var i = 0; i < m; i++){
frags += "<tr>";
for(var j = 0; j < n; j++){
frags += "<td><div id='div"+i+j+"'></div></td>";
}
frags += "</tr>";
}
frags += "</table>";
document.getElementById("fragments").innerHTML = frags;
addImage();
}
//为每个div添加背景图片
function addImage(){
var m = document.getElementById("m").value;
var n = document.getElementById("n").value;
for(var i = 0; i < m; i++){
for(var j = 0; j < n; j++){
var curdiv=document.getElementById("div"+i+j);
var wid = 798;
var hgt = 498;
curdiv.style.background="url(../images/bizhi.jpg) no-repeat scroll";
curdiv.style.backgroundSize="798px 498px";
curdiv.style.width=(wid/n)+"px";
curdiv.style.height=(hgt/m)+"px";
curdiv.style.backgroundPosition=getInverse(j*(wid/n))+
"px"+' '+getInverse(i*(hgt/m))+"px";
}
}
}
//取相反数
function getInverse(num){
return (0-num);
}