高分！分很容易拿的。将一个大的图片分割显示,该如何解决
日期：2014-05-16 浏览次数：20346 次
高分！！！分很容易拿的。将一个大的图片分割显示
现在在我的jsp页面中，想在js中提取一个大的图片，并将图片虚拟分割显示这个大图片的一部分。跪求高手指点。场景如下：
1.大的图片为images/englishBook.gif 其中w:280px，h:1143px，图片如下：
2.要将该大的图片分割为3个小的图片，大小为：w：280px，h：381px，放到js中的数值中，红色部分需要分割实现的。
各位大侠，在线等的！
以上只是我现在的想法，如果大侠知道好的办法也可以的，只要能进行分割，一切都是好说的。在这向大家先说声谢谢了！
------解决方案--------------------
css来做
现在在我的jsp页面中，想在js中提取一个大的图片，并将图片虚拟分割显示这个大图片的一部分。跪求高手指点。场景如下：
1.大的图片为images/englishBook.gif 其中w:280px，h:1143px，图片如下：
2.要将该大的图片分割为3个小的图片，大小为：w：280px，h：381px，放到js中的数值中，红色部分需要分割实现的。
- JScript code
Book_Image_Sources=new Array( "[color=#FF0000]images/englishBook.gif[/color]","#", "[color=#FF0000]images/englishBook.gif[/color]","#", "[color=#FF0000]images/englishBook.gif[/color]","#", );
各位大侠，在线等的！
以上只是我现在的想法，如果大侠知道好的办法也可以的，只要能进行分割，一切都是好说的。在这向大家先说声谢谢了！
------解决方案--------------------
css来做
- HTML code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
div {
margin:20px;
width:280px; height:381px;
background: url('http://img.my.csdn.net/uploads/201205/08/1336442293_9753.gif');
}
.a {
background-position:center;
}
.b {
background-position:bottom;
}
</style>
</head>
<body>
<div></div>
<div class="a"></div>
<div class="b"></div>
<script>
</script>
</body>
</html>
------解决方案--------------------
直接用ps分成3张图不行？
------解决方案--------------------
干嘛不人工分割后再显示？
楼主的意思是用js动态分割图片生成新图片再进行展示吗？
如果是那样，canvas好像是有这样的图片处理能力的
------解决方案--------------------
设置cssText属性，可以用js先计算,再设置数组中的值
- HTML code
<!doctype html >
<html><head>
<title> new document </title>
<script type="text/javascript">
Book_Image_Sources = new Array(
"width:280px; height:381px; background:url(http://img.my.csdn.net/uploads/201205/08/1336442293_9753.gif)","#",
"width:280px; height:381px; background:url(http://img.my.csdn.net/uploads/201205/08/1336442293_9753.gif) 0 -381px;","#",
"width:280px; height:381px; background:url(http://img.my.csdn.net/uploads/201205/08/1336442293_9753.gif) 0 -762px;","#"
);
window.onload = function(){
var d = document.getElementsByTagName("div");
for(var i = 0; i < d.length; i++){
d[i].style.cssText = Book_Image_Sources[i*2];
}
};
</script>
</head>
<body>
<div></div>
<br>
<div></div>
<br>
<div></div>
</body>
</html>
------解决方案--------------------
css的clip，可以通过 js来操作，参考下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(10px 80px 151px 0px);
}
</style>
</head>
<body>
<p>clip 属性剪切了一幅图像：</p>
<p><img border="0" src="http://www.w3school.com.cn/i/eg_bookasp.gif"></p>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
