高分！分很容易拿的。将一个大的图片分割显示,该如何解决

2012-05-10

高分！！！分很容易拿的。将一个大的图片分割显示现在在我的jsp页面中，想在js中提取一个大的图片，并将图片虚拟

高分！！！分很容易拿的。将一个大的图片分割显示
现在在我的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> 
 
</body>

</html>

[解决办法]
利用的DIV的overflow属性，把超出范围的图片隐藏掉
<div style="width:280px;height:381px;overflow:hidden;border: 1px solid #ff0000" >
       <img alt="" src="img/1336442293_9753.gif"  
           style="margin-top: -356px;margin-left: 0px">
</div>
[解决办法]
在显示的时候把img标签替换成3个同等布局效果的东西不就行了么.
这个用css和js配合应该很好做吧

热点排行

JavaScript

高分！分很容易拿的。将一个大的图片分割显示,该如何解决