300分求图片放大建议及代码（顶者有分）

网页中有一张图片，当鼠标移到图片上时，鼠标周围出现一个大约1cm的正方形用于选择图片区域，同时在网页中的另一个地方，把该区域放大2-3倍，大家看看如何做，提提建议，有源代码更好，分数还可以再加，顶者有分！！！！

44 个解决方案

#1

网页中有一张图片，当鼠标移到图片上时，鼠标周围出现一个大约1cm的正方形用于选择图片区域

这个可以用js做到。

同时在网页中的另一个地方，把该区域放大2-3倍，

这个用js做不到。需要调用组件才行。

#2

利用body的position和图片的position双重定位区域位置
获得相对于img的选取img的区域位置参数
然后在另外的地方图片width height放大，此时利用取得的相对于img的position控制显示的img的显示区域

#3

"同时在网页中的另一个地方，把该区域放大2-3倍，

这个用js做不到。需要调用组件才行。"

这个可以做到,用二幅图,一幅小图,一幅大图.
取出小图的位置,在区域内,用大图来显示.就OK了.

#4

建议你将图片文件换成SVG技术实现，那样你现在的问题就不是问题了。
再说SVG是W3C的标准呀。。

#5

向大家再说明一点：鼠标可以在图片上任意移动，同时放大的图片一直跟着变化（一直是相应区域的放大图片），是动态的把图片放大。

网页中有一张图片，当鼠标移到图片上时，鼠标周围出现一个大约1cm的正方形用于选择图片区域，这个我现在已经实现了，就是选择的图片区域不知道如何才能放大，大家再讨论讨论吧

#6

http://www.zhangxing99.com/sfnew3.asp

#7

http://www.blueidea.com/bbs/NewsDetail.asp?id=1930103

#8

给楼主个建议：你可以看看这个页面的效果：
http://www.kawasakijp.com/cp3/650.asp

#9

首先建第一个页面：yuanshi.htm 代码如下：
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT src="images/zoom.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
var usezoom = 1;
var itemimagedir = 'images/';
var zoom_bigimagediv = 'bigimagediv';
var zoom_bigimagetablediv = 'bigimagetablediv';
var zoom_highlightdiv = 'highlightdiv';
var zoom_bigimageouterdiv = 'bigimageouterdiv';
var zoom_viewportwid = 300;
var zoom_viewporthei = 300;
var zoom_mainimagewid = 300;
var zoom_mainimagehei = 487;
var zoom_mainimageurl = itemimagedir + 'middle/shufa3.jpg';
var zoom_zoomimagewid = 1000;
var zoom_zoomimagehei =1604;
var zoom_zoomimageurl = itemimagedir + 'big/shufa3.jpg';
var zoom_bigimagetablexoffset = 1;
var zoom_bigimagetableyoffset = 21;
var zoom_displayxposition = 0;
var zoom_displayyposition = 0;
var zoom_miniimagex = 0;
var zoom_miniimagey = 0;
var zoom_highlightbgcolor = 'ffffff';
var zoom_highlightimage = 'images/highlight.gif';
function GetZoomObjectData() {
var position;

if (!InIE && !InNS6 && !DOMCompatible)
return;

position = MeMSOObjectGetPosition('mainimage');
zoom_miniimagex = position.x;
zoom_miniimagey = position.y;

position = MeMSOObjectGetPosition('locatezoomim');
zoom_displayxposition = position.x;
zoom_displayyposition = position.y - 21;

Zoom_StartupZoomRegion();
}

onloadlist += 'GetZoomObjectData();';
</SCRIPT>

<META content="MSHTML 6.00.2900.2096" name=GENERATOR><LINK href="images/css.css" type=text/css rel=stylesheet></HEAD>
<BODY leftMargin=0 background=images/bg_main_yellow.jpg topMargin=0
onload=OnLoadMainFunction();>
<TABLE cellSpacing=1 cellPadding=1 width=780 align=center bgColor=#ffffff
border=1>
  <TBODY>
  <TR>
    <TD width=780>
      <TABLE cellSpacing=0 cellPadding=0 width=780 align=center border=0>
        <TBODY>
        <TR>
          <TD vAlign=top width=769>
            <TABLE cellSpacing=0 cellPadding=0 width=780 border=0>
              <TBODY>
              <TR>
                <TD vAlign=top height=515>
                  <TABLE cellSpacing=0 cellPadding=0 width=780 border=0>
                    <TBODY>
                    <TR>
                      <TD height=500>
                        <TABLE cellSpacing=0 cellPadding=5 width="97%"
                        align=center border=0>
                          <TBODY>
                          <TR>
                            <TD align=middle width=368>
                              <TABLE cellSpacing=1 cellPadding=1 align=center
                              bgColor=#bb9d93 border=0>
                                <TBODY>
                                <TR>
                                <TD align=middle bgColor=#ffffff height=50><IMG
                                id=mainimage height=487 alt=""
                                src="images/shufa3.jpg" width=300 border=0
                                name=mainimage></TD></TR></TBODY></TABLE>
                              <DIV align=center><BR><IMG height=1 src=""
                              width=300></DIV></TD>
                            <TD align=middle width=330>
                              <TABLE cellSpacing=0 cellPadding=0 width="100%"
                              border=0>
                                <TBODY>
                                <TR>
                                <TD colSpan=2><IMG id=locatezoomim height=1
                                alt="" src="images/dot.gif" width=1
                                name=locatezoomim></TD></TR></TBODY></TABLE>
                              <DIV align=left><IMG height=272
                              src="images/preview_001.jpg" width=287><BR><A
                              href="javascript:history.go(-1);">　　<IMG
                              height=18 alt=返回资讯列表
                              src="images/icon_back_hl.gif" width=100
                              vspace=5 border=0></A> <A
                              href="http://www.zhangxing99.com/images/big/shufa3.jpg"
                              target=_blank><IMG height=18
                              alt="请点击鼠标右键，选 “目标另存为” 选项" hspace=10
                              src="images/icon-preview-big.gif" width=100
                              vspace=5 border=0></A> </DIV></TD></TR></TBODY></TABLE>
                        <DIV id=highlightdiv
                        style="Z-INDEX: 2; LEFT: -2000px; VISIBILITY: hidden; POSITION: absolute; TOP: -2000px"></DIV>
                        <DIV id=bigimageouterdiv
                        style="Z-INDEX: 4; LEFT: -2000px; VISIBILITY: visible; OVERFLOW: hidden; WIDTH: 300px; POSITION: absolute; TOP: -2000px; HEIGHT: 300px">
                        <DIV id=bigimagediv
                        style="Z-INDEX: 4; LEFT: -2000px; VISIBILITY: hidden; POSITION: absolute; TOP: -2000px"><IMG
                        id=mainzoomimage height=2400 alt=""
                        src="images/dot.gif" width=800 border=0
                        name=mainzoomimage></DIV></DIV>
                        <DIV id=bigimagetablediv
                        style="Z-INDEX: 3; LEFT: -2000px; VISIBILITY: hidden; POSITION: absolute; TOP: -2000px">
                        <TABLE cellSpacing=0 cellPadding=0 width=307 border=0>
                          <TBODY>
                          <TR>
                            <TD style="BACKGROUND-COLOR: #000000" width=1><IMG
                              height=1 alt="" src="images/dot.gif"
                            width=1></TD>
                            <TD style="BACKGROUND-COLOR: #000000"
                              width=300><IMG height=1 alt=""
                              src="images/dot.gif" width=300></TD>
                            <TD style="BACKGROUND-COLOR: #000000" width=1><IMG
                              height=1 alt="" src="images/dot.gif"
                            width=1></TD>
                            <TD width=5><IMG height=1 alt=""
                              src="images/dot.gif" width=5></TD></TR>
                          <TR>
                            <TD style="BACKGROUND-COLOR: #000000"><IMG
                              height=19 alt="" src="images/dot.gif"
                            width=1></TD>

#10

接上面的：
<TD
                            style="FONT-WEIGHT: 700; BACKGROUND-IMAGE:  url(images/redbar.gif); COLOR: #ffffff"
                            align=middle>放大显示</TD>
                            <TD style="BACKGROUND-COLOR: #000000"><IMG
                              height=1 alt="" src="images/dot.gif"
                            width=1></TD>
                            <TD vAlign=bottom>
                              <TABLE cellSpacing=0 cellPadding=0 width=5
                              border=0>
                                <TBODY>
                                <TR>
                                <TD
                                style="FILTER: alpha(opacity=25); BACKGROUND-COLOR: #000000; moz-opacity: 0.25"><IMG
                                height=15 alt="" src="images/dot.gif"
                                width=1></TD></TR></TBODY></TABLE></TD></TR>
                          <TR>
                            <TD style="BACKGROUND-COLOR: #000000"
                              colSpan=3><IMG height=1 alt=""
                              src="images/dot.gif" width=1></TD>
                            <TD
                            style="FILTER: alpha(opacity=25); BACKGROUND-COLOR: #000000; moz-opacity: 0.25"><IMG
                              height=1 alt="" src="images/dot.gif"
                            width=1></TD></TR>
                          <TR>
                            <TD style="BACKGROUND-COLOR: #000000"><IMG
                              height=300 alt="" src="images/dot.gif"
                            width=1></TD>
                            <TD id=zoommainimage><IMG height=1 alt=""
                              src="images/dot.gif" width=1></TD>
                            <TD style="BACKGROUND-COLOR: #000000"><IMG
                              height=1 alt="" src="images/dot.gif"
                            width=1></TD>
                            <TD
                            style="FILTER: alpha(opacity=25); BACKGROUND-COLOR: #000000; moz-opacity: 0.25"><IMG
                              height=1 alt="" src="images/dot.gif"
                            width=1></TD></TR>
                          <TR>
                            <TD style="BACKGROUND-COLOR: #000000"
                              colSpan=3><IMG height=1 alt=""
                              src="images/dot.gif" width=1></TD>
                            <TD
                            style="FILTER: alpha(opacity=25); BACKGROUND-COLOR: #000000; moz-opacity: 0.25"><IMG
                              height=1 alt="" src="images/dot.gif"
                            width=1></TD></TR>
                          <TR>
                            <TD colSpan=3>
                              <TABLE cellSpacing=0 cellPadding=0 width=302
                              border=0>
                                <TBODY>
                                <TR>
                                <TD width=5><IMG height=1 alt=""
                                src="images/dot.gif" width=5></TD>
                                <TD
                                style="FILTER: alpha(opacity=25); BACKGROUND-COLOR: #000000; moz-opacity: 0.25"
                                width=297><IMG height=5 alt=""
                                src="images/dot.gif"
                                width=297></TD></TR></TBODY></TABLE></TD>
                            <TD
                            style="FILTER: alpha(opacity=25); BACKGROUND-COLOR: #000000; moz-opacity: 0.25"><IMG
                              height=5 alt="" src="images/dot.gif"
                            width=5></TD></TR></TBODY></TABLE></DIV>
                        </TD>
                    </TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR>
        </TBODY></TABLE></TD></TR></TBODY></TABLE></BODY></HTML>
在新建一个文件夹images
在images下面新建两个文件夹一个是big一个是middle
把小图放在images里面
在 big和middle放大图片

#11

多谢各位，我再研究研究

#12

我希望做的正是这样的效果http://www.zhangxing99.com/sfnew3.asp

多谢多谢

#13

书上看到过，几年以前的事了，是宝马网页上的，现在用js来做确实有点土了，
他的理念是这样的：
如果您将一个图片长＊２宽＊２就在原图的上面覆盖一张４倍的大图，
您在小图上移动一个向素，就在大图上动两个向素！
如果书在的话，明天我回复！

#14

俺不会做，纯顶...

#15

是不图片放大？

#16

接上面的，昨天没有把源码发完（因为不能连续回复三次）/今天继续
js 文件如下：名称zoom.j太长了/贴不上来！给你个连接自己下载吧：

http://www.zhangxing99.com/zoom.js

#17

问题马上要解决了，感谢大家帮忙，忙完后，我会尽快揭帖，散分，再次感谢大家

#18

要那么复杂吗？试试这样行不行（透明层我就不画了。）

<html>
<head>
<title></title>
</head>
<body>
<BR>
原图：
<img src="http://apps.scschina.com:8080/image?image/5/100_9036.JPG" width="268" height=200 onmousemove="zoom()">
<BR><BR><BR>
局部放大图：
<div style="width:268;height=200;overflow:hidden">
<img src="http://apps.scschina.com:8080/image?image/5/100_9036.JPG" id=zoomImg width=1340 height=1000>
</div>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</body>
</html>

#19

改了一下，现在可以修改zoomRate变量来改变放大倍数了。

<html>
<head>
<title></title>
</head>
<body>
<BR>
原图：
<img src="http://img.pconline.com.cn/images/photo2/839980/1118509777696.JPG" onmousemove="zoom()" id=srcImg>
<BR><BR><BR>
局部放大图：
<div style="width:256;height=170;overflow:hidden">
<img id=zoomImg>
</div>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</body>
</html>

#20

对不起，div里面的width:256;height=170;是多余的。忘删掉了。

#21

这种方法很简单就实现了放大,如果鼠标周围再出现个选择区域框就更好了

#22

现在已经实现了,放大倍数如何调整呀,谁能解释下,在线等

#23

var zoomRate = 5;
就是放大倍数呀

#24

img 的 onMouseMove 事件中弹出窗口~并设置放大 zoomIn

#25

我没说清楚,我是用的以下的程序,不是用的'emu_ston(祝福后山)'的程序,哪个数字是改放大倍数的呀
参考的是网站http://www.blueidea.com/bbs/NewsDetail.asp?id=1930103
<script src="images/zoom.js" type="text/javascript"></script>
<script type="text/javascript">
var usezoom = 1;
var itemimagedir = 'http://localhost:99/zoomIn/images/';
var zoom_bigimagediv = 'bigimagediv';
var zoom_bigimagetablediv = 'bigimagetablediv';
var zoom_highlightdiv = 'highlightdiv';
var zoom_bigimageouterdiv = 'bigimageouterdiv';
var zoom_viewportwid = 290;//这里好象是放大区域的宽
var zoom_viewporthei = 800;//放大区域的高
var zoom_mainimagewid = 431;//被放大区域的宽
var zoom_mainimagehei = 431;//被放大区域的高
var zoom_mainimageurl = itemimagedir + 'th09.gif';
var zoom_zoomimagewid = 906;
var zoom_zoomimagehei =3358;
var zoom_zoomimageurl = itemimagedir + 'art.jpg';
var zoom_bigimagetablexoffset = 1;
var zoom_bigimagetableyoffset = 23;
var zoom_displayxposition = 0;
var zoom_displayyposition = 0;
var zoom_miniimagex = 0;
var zoom_miniimagey = 0;
var zoom_highlightbgcolor = 'ffffff';
var zoom_highlightimage = 'images/dot.gif';
function GetZoomObjectData() {
var position;

if (!InIE && !InNS6 && !DOMCompatible)
return;

position = MeMSOObjectGetPosition('mainimage');
zoom_miniimagex = position.x;
zoom_miniimagey = position.y;

position = MeMSOObjectGetPosition('locatezoomim');
zoom_displayxposition = position.x ;
zoom_displayyposition = position.y - 1;

Zoom_StartupZoomRegion();
}

onloadlist += 'GetZoomObjectData();';
</script>

#26

学习中！！！！

#27

http://www.blueidea.com/bbs/NewsDetail.asp?id=1930103给出的原始例子打不开，只看了看贴出来的zoom.js。

初步估计是在这里控制了放大倍数：

zoom_zoomboxsubx = zoom_zoomboxwid >> 1;
zoom_zoomboxsuby = zoom_zoomboxhei >> 1;

但是放大倍数没有作为一个变量抽取出来，所以其他代码有可能是依赖于“放大一倍”这个约定的，牵一发而动全身啊：

var zoom_viewportwid = 240;//这里好象是放大区域的宽
var zoom_viewporthei = 240;//放大区域的高
var zoom_mainimagewid = 120;//被放大区域的宽
var zoom_mainimagehei = 120;//被放大区域的高

作者的标识符命名风格也是别具一格。像zoom_zoom...这样的变量名，写一个zoom不够还要再来一个；还有什么zoom_viewportwid、zoom_viewporthei，三个单词都写全了还要把width和height砍掉几个字母，真费解；还有MeMSO...这样的方法名，想破了头都没想出来MeMSO是什么东西，作者签名？全部函数名都是大写字母开头的，也是比较罕见的风格。感觉简直专门写来刁难读者的。

楼主想用人家的代码，恐怕还是好好重构一番再说。

#28

多看了一眼，总算看到放大倍数了：

zoom_zoomimagemult = zoom_zoomimagewid / zoom_mainimagewid;

#29

呵呵，原来multi被作者缩写为mult了，强！

#30

#31

学习

#32

帮顶...

#33

to emu_ston(祝福后山) :你好,这个zoom_zoomimagemult不是放大系数吧,我怎么把他的值直接改成0.5,1,4,8甚至1000时,放大图形的大小就不变呀.这个源程序中的放大系数到底是那个呀??????

请教一下,这个zoom.js在功能实现上源程序为什么这么复杂呀,而你的方法既简单又能说明问题,又什么区别,优缺点吗??

学习学习.........

#34

哪位高人能解决这个问题呢?多谢多谢

#35

解决不了顶

#36

帮顶

#37

帮你

#38

顶

#39

学习

#40

问题就差这最后一步了................................

#41

#42

用两张图，一张隐藏，一张显示就可以~~

#43

顶

#44

sd_lichangyou：

上周五就休假去了，刚刚才看到你的留言。

看看这一句：
zoom_zoomimagemult = zoom_zoomimagewid / zoom_mainimagewid;
虽然zoom_zoomimagemult保存了放大倍数，但是放大倍数并不是由zoom_zoomimagemult来决定的，而是由zoom_zoomimagewid 和 zoom_mainimagewid两个变量决定。所以你改它的值没有产生效果不奇怪。

在金山词霸上查了一下“倍数”，呵呵，果然只有一个结果：multiple，难怪难怪。zoom.js的作者应该还是查了金山词霸才定下来的变量名的。

我也没有仔细的研究过zoom.js的实现方式好不好，没有办法比较我和他的做法有什么优劣。我的做法是比较直观了，直接把原图放大若干倍，然后计算出来需要显示的区域，把不需要显示的部分隐藏掉就好了。为了显出效果，故意在显示原图的时候把它缩小了一倍显示（srcImg.height = srcImg.height/2;）。

#1

#2

#3

#4