鼠标放到小图,然后显示大图

http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html
可以参考这个

设置它的宽和高一个隐藏的img this.parentNode.src=""

人家网站把那个javascript都写得很明显了。你试试查看源文件
$("#mycarousel li").mouseover(function(){
$("#Product_BigImage img")[0].src="http://img10.360buyimg.com/S1/"+this.getElementsByTagName("img")[0].name;
$("#Product_BigImage img")[0].jqimg="http://img10.360buyimg.com/S0/"+this.getElementsByTagName("img")[0].name;
$(this).siblings().each(function(){
this.getElementsByTagName("img")[0].className="";
})
this.getElementsByTagName("img")[0].className="curr"; })
};
主要是用到jQuery的mouseover和each两个函数。前者就不用说了。后者主要是再document ready时给一组COM控件添加mouseover事件。可以完全把图片都定义在css里面。这里只是再mouseover时给上面那个大图显示区换css就OK了。
我不是script高手，就是希望能帮到你。呵呵

有啊在diaplay的两个属性设置图片的大小 none隐藏；block显示

<!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 runat="server">
<title>放大镜效果</title>
<link href="css/jqzoom.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
(function($){$.fn.jqueryzoom=function(options)
{var settings={xzoom:200,yzoom:200,offset:10,position:"right",lens:1,preload:1};
if(options){$.extend(settings,options)}
var noalt='';$(this).hover(function(){var imageLeft=$(this).offset().left;
var imageTop=$(this).offset().top;
var imageWidth=$(this).children('img').get(0).offsetWidth;
var imageHeight=$(this).children('img').get(0).offsetHeight;noalt=$(this).children("img").attr("alt");
var bigimage=$(this).children("img").attr("jqimg");
$(this).children("img").attr("alt",'');
if($("div.zoomdiv").get().length==0){$(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");
$(this).append("<div class='jqZoomPup'> </div>")}
if(settings.position=="right"){
if(imageLeft+imageWidth+settings.offset+settings.xzoom>screen.width){
leftpos=imageLeft-settings.offset-settings.xzoom
}
else{leftpos=imageLeft+imageWidth+settings.offset}
}
else{leftpos=imageLeft-settings.xzoom-settings.offset;
if(leftpos<0){leftpos=imageLeft+imageWidth+settings.offset}
}
$("div.zoomdiv").css({top:imageTop,left:leftpos});
$("div.zoomdiv").width(settings.xzoom);
$("div.zoomdiv").height(settings.yzoom);
$("div.zoomdiv").show(); if(!settings.lens){$(this).css('cursor','crosshair')} $(document.body).mousemove(function(e){mouse=new MouseEvent(e);var bigwidth=$(".bigimg").get(0).offsetWidth; var bigheight=$(".bigimg").get(0).offsetHeight; var scaley='x'; var scalex='y'; if(isNaN(scalex)|isNaN(scaley)){var scalex=(bigwidth/imageWidth);var scaley=(bigheight/imageHeight); $("div.jqZoomPup").width((settings.xzoom)/scalex);$("div.jqZoomPup").height((settings.yzoom)/scaley); if(settings.lens){$("div.jqZoomPup").css('visibility','visible')}} xpos=mouse.x-$("div.jqZoomPup").width()/2-imageLeft;ypos=mouse.y-$("div.jqZoomPup").height()/2-imageTop; if(settings.lens){xpos=(mouse.x-$("div.jqZoomPup").width()/2<imageLeft)?0:(mouse.x+$("div.jqZoomPup").width()/2>imageWidth+imageLeft)?(imageWidth-$("div.jqZoomPup").width()-2):xpos;ypos=(mouse.y-$("div.jqZoomPup").height()/2<imageTop)?0:(mouse.y+$("div.jqZoomPup").height()/2>imageHeight+imageTop)?(imageHeight-$("div.jqZoomPup").height()-2):ypos} if(settings.lens){$("div.jqZoomPup").css({top:ypos,left:xpos})}scrolly=ypos;$("div.zoomdiv").get(0).scrollTop=scrolly*scaley;scrollx=xpos;$("div.zoomdiv").get(0).scrollLeft=(scrollx)*scalex})}, function(){$(this).children("img").attr("alt",noalt);
   $(document.body).unbind("mousemove");    if(settings.lens){$("div.jqZoomPup").remove()}    $("div.zoomdiv").remove()});
   count=0;
   if(settings.preload){$('body').append("<div style='display:none;' class='jqPreload"+count+"'>sdsdssdsd</div>");
   $(this).each(function(){
var imagetopreload=$(this).children("img").attr("jqimg");
var content=jQuery('div.jqPreload'+count+'').html();
   jQuery('div.jqPreload'+count+'').html(content+'<img src=\"'+imagetopreload+'\">')})}}})(jQuery);function MouseEvent(e){this.x=e.pageX;this.y=e.pageY}
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".jqzoom").jqueryzoom({
            xzoom:300,  // 放大图的宽
            yzoom:300,  // 放大图的高
            offset:30,   // 放大图距离原图的位置
            position:'right'  // 放大图在原图的右边(默认为right)
        });
    });
</script></head>
<body>

        <div>
            <div class="jqzoom">
                <img src="images/room_small.jpg" alt="房间演示" jqimg="images/room_big.jpg" />
            </div>
        </div>

</body>
</html>

有呀，有现成的。
你到这个地址下载：http://www.51mdq.com/shop/order/para_10006_230_P104240.html
下载两个文件：
<script type="text/javascript" src="/js/MagicZoom.js"></script>
<link href="/style/MagicZoom.css" type="text/css" rel="Stylesheet" />
这两个文件下载后，导入你当前页面，用的时候很简单：
<a href='大图URL地址' class="MagicZoom" target="_blank"><img src="小图URL地址" alt="" /></a>

看看：http://www.cnblogs.com/sohighthesky/archive/2009/11/15/imagezoom.html

调试易

鼠标放到小图,然后显示大图

解决方案 »