实现如下效果？

实现像Vancl网站如：http://shopping.vancl.com/ProductInfo_111042D.html鼠标在左图上移动，右边显示相应的大图这个效果怎么做？有源码或能提供源码位置最好

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

firefox
打开连接页面源码可以看到 jQuery 做的，估计是一个 jQuery插件，自己研究一下把
    <link href="/css/jqzoom.css" type="text/css" rel="stylesheet" />
    <link href="/css/MyVancl.css" type="text/css" rel="stylesheet" />
    <link href="/css/RockImg.css" type="text/css" rel="stylesheet" />    <script src="/PublicControls/js/jquery.jqzoom.js"></script>
    <script src="/PublicControls/js/jquery.jcarousel.js"></script>
    <script type="text/javascript" src="/PublicControls/NewJs/MyVancl.js"></script>
    <script type="text/javascript">
            //jQuery.noConflict();
     function mycarousel_initCallback(carousel){
    $("#mycarousel li").mouseover(function(){
    $("#productImage")[0].src = this.getElementsByTagName("img")[0].src.replace("small","middle");
    $("#productImage").attr("jqimg",this.getElementsByTagName("img")[0].src.replace("small","Big"));
$(this).siblings().each(function(){
this.getElementsByTagName("img")[0].className="";
})
this.getElementsByTagName("img")[0].className="curr";     })
       };
            jQuery(document).ready(function(){
            jQuery("img.jqzoom").jqueryzoom({
            xzoom: 280,
            yzoom: 240,
            offset: 15,
            position: "right"
            });
            jQuery('#mycarousel').jcarousel({initCallback:mycarousel_initCallback});
           });

           $(function(){
    if($("#prodattr .size dd").length==1)
    {
        $("#prodattr .size dd").eq(0).click();
    }
});
    if ($.browser.msie) {
   document.execCommand("BackgroundImageCache", false,true);
    }    </script>
JQUERY 的典型效果~~，，参考~~    http://blog.csdn.net/tolys/archive/2008/04/21/2311987.aspx
我有段JQUERY的代码：在ASP上运行没问题，也可以实现效果，但是在.NET页面使用报错：Jquery未定义：
代码如下：
<link href="../Inc/jqzoom.css" type="text/css" rel="stylesheet"/>
<script src="../Inc/jquery.js" type="text/javascript" ></script>
<script src="../Inc/jquery.jqzoom.js" type="text/javascript" ></script>
<script type="text/javascript" language="javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("img.jqzoom").jqueryzoom({
xzoom: 306,
yzoom: 306,
offset: 32,
position: "right"
});
});
</script>
<img width="250" alt="" class="jqzoom"  src="<%=imgUrl[1].ToString()%>"   runat="server" id="hwImage" name="hwImage"   border="0"/>
.NET中如何调用Jquery,望各位指点
http://10.168.0.3/webapp/pedata/SVG_Alayer/imageList.asp
=========imagelist.asp========
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<%
dim fso,fd,fl,fset,thisPath
thisPath=Server.MapPath("..\SVG_Alayer")
set fso=CreateObject("Scripting.FileSystemObject")
set fd=fso.getFolder(thisPath &"\images\")
set fset=fd.Files
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>SVG Alayer可用图片列表</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #3333FF;
position: relative;
left: 2px;
}
a:link{
    text-decoration:none;
}
#Layer1 {
position:absolute;
left:250px;
top:52px;
width:800px;
height:500px;
z-index:1;
border: 1px solid #3333FF;
background:url(images/18.jpg);
}
</style>
<script language="javascript">
function dynamicShow(){
   var obj=event.srcElement;
   //var win=document.getElementById("showWin");
   var win=document.getElementById("Layer1");
   win.style.background="url("+obj.href+")";
   //alert(win.Src);
}
function setScroll(){
   var SH=screen.height;
   document.all.Layer1.style.top=(SH-600)/4+document.body.scrollTop;
}
</script>
</head><body onscroll="setScroll()">
<div id="Layer1"></div>
<p class="Head" style="margin:0px; text-decoration:underline;">图片列表 <a href="upload.html" target="_blank"> 点击这里上传图片</a></p>
<%For Each fl in fset %>
<li class="tree"><span style="color:#3366FF">--</span> <a href="images\<%=fl.name%>" target="_blank" onMouseOver="dynamicShow()"><img src="images\<%=fl.name%>" width="100px" height="75px" border="1"/> </a>  <%=fl.name%></li>
<br />
<%Next%>
</body>
</html>
4楼的搞错了，我是问.NET下如何调用Jquery,ASP里我知道如何调用，并且已经实现了功能
.NET 下调用JQUERY要注意哪些问题？JQUERY不熟啊
Views.aspx页面：
<link href="../Inc/jqzoom.css" type="text/css" rel="stylesheet"/>
<script src="../Inc/jquery.js" type="text/javascript" ></script>
<script src="../Inc/jquery.jqzoom.js" type="text/javascript" ></script>
。
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="baseline">
<script type="text/javascript" language="javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("img.jqzoom").jqueryzoom({
xzoom: 306,
yzoom: 306,
offset: 32,
position: "right"
});
});
</script>
<img width="250" alt="<%=imgUrl[2].ToString()%>" class="jqzoom"  src="<%=imgUrl[1].ToString()%>"   runat="server" id="hwImage" name="hwImage"   border="0"/></td>
</tr></table>报错：JQuery未定义  调试指向：jQuery.noConflict();
调用总报错说：JQUERY未定义：但明明引用了相关的JS文件啊
这个东西不是很难，我的理解是：
  它本身就是一张大图放在那个显示放大的div中，它是根据你鼠标移动的位置值，得到那个矩形左上角的位置的，从而根据这个矩形的左上角的xy坐标来定位大图上的坐标的，再根据得到的矩形的长和宽进行加大，在那个div中设置它的样式，只显示指定的大小就行了
找到了一个实现该效果的例子：并且有源码 http://www.magictoolbox.com/magiczoom_examples/但是有一个问题  我的页面上左边是图片，右边显示该产品相关信息用上面的代码时，鼠标移到左边图片没有任何反应，如果把右边的文字信息删除就可以了，如果能找到一个更好的Jquery控件或者是更好的demo那就好了   各位提供以下咯
这个我自己做过：
写个JS
<script language="javascript">
    function selectimg(image){
var img=document.getElementById("img1");
img.src=image;
}
    </script>
后台是这样的：
<img onload=\"DrawImage(this)\" src='ComPic/Product/" + modelp.Picname + "' title='' onClick=\"selectimg('ComPic/Product/" + modelp.Picname + "');\"/>，把onclick事件改成onmouseover就可以了
看看这个，代码开源的
http://sandbox.leigeber.com/javascript-slideshow/
这是个图片轮换的效果  和我这个还是有那么一点区别我想要实现这样的效果
http://sandbox.leigeber.com/javascript-slideshow/
你的DrawImage(this) JS函数是怎么样的？   要是能实现下面的效果最好
你的DrawImage(this) JS函数是怎么样的？   要是能实现下面的效果最好