今天看到一画廊网站，技术不错，谁知道这个效果是如何做的吗？能提供技术吗？
今天看到一画廊网站，技术不错，谁知道这个效果是如何做的吗？能提供技术吗？
网址在：http://www.sxr-gallery.com/art_pic_detail.asp?art_pic_id=1028
点击左边的小图，大图直接在右边的方框内直接显示出来了。
这样的效果不错，不知道哪位高人可以提供技术！
小弟愿再送300分！
谢谢！
问题点数：100、回复次数：7Top
1 楼slayerbb（名字被抢了）回复于 2006-03-01 17:43:35 得分 0
<SCRIPT type=text/javascript>
var usezoom = 1;
var itemimagedir = '/images/art_pic/';
var zoom_bigimagediv = 'bigimagediv';
var zoom_bigimagetablediv = 'bigimagetablediv';
var zoom_highlightdiv = 'highlightdiv';
var zoom_bigimageouterdiv = 'bigimageouterdiv';
var zoom_viewportwid = 400;
var zoom_viewporthei = 320;
var zoom_mainimagewid = 200;
var zoom_mainimagehei = 98;
var zoom_mainimageurl = '/images/art_pic/20051230,134824.jpg'
//images 1
var zoom_zoomimagewid = 1000;
var zoom_zoomimagehei = 490;
var zoom_zoomimageurl = '/images/art_pic/20051230,134824.jpg'
// images 2
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';
// images with cursor
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>
<body onload=OnLoadMainFunction();>Top
2 楼slayerbb（名字被抢了）回复于 2006-03-01 17:44:33 得分 0
http://www.sxr-gallery.com/includes/zoom.js
secondary jsTop
3 楼xhbmj（《升龙道》）回复于 2006-03-01 17:49:01 得分 0
test.htm
<SCRIPT src="/zoom.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
var usezoom = 1;
var itemimagedir = '/images/art_pic/';
var zoom_bigimagediv = 'bigimagediv';
var zoom_bigimagetablediv = 'bigimagetablediv';
var zoom_highlightdiv = 'highlightdiv';
var zoom_bigimageouterdiv = 'bigimageouterdiv';
var zoom_viewportwid = 400;
var zoom_viewporthei = 320;
var zoom_mainimagewid = 200;
var zoom_mainimagehei = 98;
var zoom_mainimageurl = 'http://www.sxr-gallery.com/images/art_pic/20051230,134824.jpg'
var zoom_zoomimagewid = 1000;
var zoom_zoomimagehei = 490;
var zoom_zoomimageurl = 'http://www.sxr-gallery.com/images/art_pic/20051230,134824.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>
</head>
<body onload=OnLoadMainFunction();>
<img id="mainimage" src="http://www.sxr-gallery.com/images/art_pic/20051230,134824.jpg" width="200" border="0" name="mainimage" height="98">
<a href="art_pic_bigImg.asp?bigImg=20051230,134824.jpg&id=1028" target="_blank">点击看大图</a> [<a href=#1 onClick=javascript:window.open("http://mms.caiku.com//code/4/SendPic.aspx?uid=3629&title=人物&fileurl=http://www.sxr-gallery.com/images/art_pic/20051230,134824.jpg","","width=100,height=100"); target="_top"><font color="#FF0000">发送到手机</font></a>]
<img src="images/dot_line.gif" width="401" height="5">
<img id="locatezoomim" height="1" src="/images/dot_1.gif" width="1" name="locatezoomim">
<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" src="temp.files/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"> </div>
zoom.js到http://www.sxr-gallery.com/includes/zoom.js下载和test.htm放到一起Top
4 楼zhanghongwen（流氓蚊子）回复于 2006-03-01 18:03:15 得分 0
楼上的是不是把查看源代码的结果贴上来就了事.呵呵...........
这样的应该是JS特效.我在一个网站好像看到过,不过没保存下来.
UPTop
5 楼jumpnew929（）回复于 2006-03-01 18:55:58 得分 100
其实很简单的呀，就是
1.先搞一个小图一个大图（当然小图也可以用大图缩小显示的），大图Z坐标要低，最好为负，然后把预览位置设置成透明（没有背景色，不是白色），大图的POSITION设置屏幕上看不到
2.再做一个2*2的GIF图，把左上角和右下角2点做成透明，另外2角做成黑色（不需要考虑特效的），把GIF按照要求大小拉伸，GIF的Z坐标设大，POSITION尽量设置大（不要在屏幕上能看到）
3.在小图上面建立一个层（Z坐标要超过小图和GIF），响应鼠标的移动，进入和离开事件，后2者控制GIF是否在小图位置里面（设置POSITION，当然也可以用display等属性来设置），前者事件就是最关键的，要求设置大图的POSITION属性，控制显示位置
4.小图上注意移动到边缘时不要让GIF框显示到外面哦Top
6 楼jumpnew929（）回复于 2006-03-01 18:56:28 得分 0
很简单的，可以先做一个简单的试试，然后一点点美化Top
7 楼lymyx（明月）回复于 2006-03-01 21:56:36 得分 0
好的，谢谢，已经解决了。Top
相关问题
- 请大家帮忙推荐一个省资源，效果不错的远程管理服务器的软件，使用终端服务的话,看到的并不是当前桌面.
- 刚做完一个弹出窗口控件，效果还不错
- 寻免费的效果不错的java混淆器。
- 有谁用过viavoice9.0吗?今天看到它表现真不错.
- 刚才看到的一个不错的东西，50楼以后给答案
- 有相当多 CInternetSession 者快来看！到底哪个效果好？？？？？？？？？欢迎罐水！
- 滚动条的style效果不是要IE6.0上才可以看到的吗？
- 请教ListBox的自画效果--从老妖网站上看到的那种
- 请问怎样能实现让一个物体可以看到三维效果
- 我宣布：今天CSDN很快，回复、发表（如果你看到了这个贴子）也很快！不错不错！
