高分求 DataList 绑定图片 可移动放大镜！！！

在51JS有很多的，贴一段别人写的代码，来自51JS
<script language="JavaScript">
<!--
var smallX = 200; //缩略图宽度
var bigX = 600; //预览窗大小,可以任意设置
var bigY = 450;
var srcX = -1; //原图大小,可以任意设置. 如都为-1将使用图片原始大小
var srcY = -1;
var border = 5; //边框
var smallY,viewX,viewY,bl,isIE,vX,vY;
window.onload=function (){
head.innerHTML="图片已载入";
isIE=window.event?1:0;
if (srcX==-1 && srcY==-1){srcX=bigpic.width;srcY=bigpic.height;}
else{bigpic.width=srcX;bigpic.height=srcY;}
smallY=srcY*smallX/srcX;
viewX=bigX/srcX*smallX; //预览范围
viewY=bigY/srcY*smallY;
bl=srcX/smallX; //缩小比例
smallpic.width=smallX;
smallpic.height=smallY;
smallbox.style.borderWidth=border;
smallbox.style.width=smallpic.offsetWidth+border*2*isIE;
smallbox.style.height=smallpic.offsetHeight+border*2*isIE;
bigbox.style.borderWidth=border;
bigbox.style.width=bigX+border*2*isIE;
bigbox.style.height=bigY+border*2*isIE;
view.style.left=smallbox.offsetLeft + border;
view.style.top=smallbox.offsetTop + border;
view.style.width=viewX- !isIE*3+1;
view.style.height=viewY- !isIE*3+1;
}
function move(e){
var e = window.event?window.event:e;
if (!isIE){vX=e.pageX-border-smallbox.offsetLeft;
vY=e.pageY-border-smallbox.offsetTop}
else{vX=e.offsetX;vY=e.offsetY}
vX+=-viewX/2;
vY+=-viewY/2;
if (vX < 0) vX = 0;
if (vY < 0) vY = 0;
if (vX > smallX - viewX) vX = smallX - viewX;
if (vY > smallY - viewY) vY = smallY - viewY;
bigpico.style.marginLeft = - vX * bl;
bigpico.style.marginTop = - vY * bl;
view.style.left = vX + smallbox.offsetLeft + border;
view.style.top = vY + smallbox.offsetTop + border;
}
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
body{background:black}
img{display:block;}
#smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden;font-size:0px}
#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden;font-size:0px}
#view{border:1px #ddd solid;width:0px;height:0px;position:absolute;font-size:0px}
#head{text-align:center;line-height:40px;font:bold 16px/40px;color:pink}
//-->
</style>
<div id="head">图片loading...</div>
<div id="smallbox"><img id="smallpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/11/7/55591.jpg" border="0" onmousemove="move(event)"></div>
<div id="bigbox"><div id="bigpico"><img id="bigpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/11/7/55591.jpg" border="0"></div></div>
<div id="view" onmousemove="if (!isIE) move(event)"></div>

解决方案 »

  1.   

    我自己也想写，C#我在行，但是我对javascript懂得很少，没法下手，特别是还要绑定在Datalist控件里面更难了。我在开发一商务网，就差这个问题了。谢谢楼上的朋友！
      

  2.   

    http://www.lanrentuku.com/lanren/jscode/js-0162/这里有很多
    copy就行
      

  3.   

    我有一段网上找的代码：
        <HTML> 
    <META http-equiv=Content-Type content="text/html; charset=utf-8"> 
    <link href="http://www.vancl.com/css/jqzoom.css" type="text/css" rel="stylesheet" /> 
    <SCRIPT src="http://www.vancl.com/PublicControls/js/jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="http://www.vancl.com/PublicControls/js/jquery.jqzoom.js"></SCRIPT> <SCRIPT type=text/javascript>... 
    jQuery.noConflict(); 
    jQuery(document).ready(function()...{ 
    jQuery("img.jqzoom").jqueryzoom(...{ 
    xzoom: 280, 
    yzoom: 280, 
    offset: 15, 
    position: "right" 
    }); 
    }); 
    </SCRIPT> <BODY> <IMG class=jqzoom 
    alt=http://img.article.pchome.net/game/00/07/75/84/pic_lib/wm/424.jpg 
    src=http://t1.baidu.com/it/u=2111826760,700048667&fm=0&gp=6.jpg 
    border=0 > 
    </BODY> </HTML> 但是在ASP。ENT 2005上怎么调用阿？而且邦定到DataList里面？
      

  4.   

    javascript写的代码可以完全跟datalist无关，你绑定跟不绑定都是一样的写法...
    只要你能用javascript写出来就成了，现成的代码可能很长，最好是自己到网上找找吧