图片等比例缩放、小图看大图、及图片加载 的一些总结
<body style="margin:0px" onload="DrawImage(45,45);">
<body style="margin:0px" onload="DrawImage(45,45);"> <div id=m style="position:absolute;top:0;display: none;left:0;filter: alpha(opacity=100);z-index: 100" >
<img src="">
</div>
<img src="">
</div>
<img class="bigimage" src='a.jpg' onmouseover="showimage(this)" style="display:none;cursor:hand;" title='' onmouseout="pichide();" >
<img class="bigimage" src='b.jpg' onmouseover="showimage(this)" style="display:none;cursor:hand;" title='' onmouseout="pichide();" >
<img class="bigimage" src='c.jpgs' onmouseover="showimage(this)" style="display:none;cursor:hand;" title='' onmouseout="pichide();" >
</body>
Note：
1 发现 visibility属性在safari浏览器中不支持，所以改用display来控制显示、隐藏
2 DrawImage(iwidth,iheight)｛//方法体｝ //iwidth 在页面显示的Width，iheight 在页面显示的height
把代码的重要部分写出来， body 的onload事件，以及多个图片的代码
下边是js代码：
function DrawImage(iwidth,iheight){
$('img[class=bigimage]').each(function(){
var image=new Image();
image.src=this.src;
if ($.browser.safari) {
//如果是 safari浏览器，则要设置image的Width和height，
//经过测试 发现safari浏览器 如果不设置图片大小<img src="a.jpg">
//得到的Width和height 都是0
//其他浏览器得到的则是原始Width和height
image.width=this.width;
image.height=this.height;
}
var bl=image.width/image.height; //得到原始图片Width和height的比例
$(this).attr('width',iwidth); // 设置显示图片的Width
//alert($(this).attr('width')); //在ie中 此方法无效，在safari，FF，谷歌浏览器中都可以得到正确值
//alert(this.width);
//alert($(this).width()); //此方法通用
$(this).attr('height',iwidth/bl); //根据Width和比例（bl）设置height
$(this).show();
});
}
该方法主要实现了 图片可以等比例显示。
因为是改写别人的方法，所以实现的时候没仔细研究，不过在写这篇文章的时候，仔细看了代码，
我就在纳闷，为什么要创建image对象？这个对象的作用是什么？
好像仅仅是为了那句 var bl=image.width/image.height;
而image对象的src，Width，height都是原始图片的属性，那为什么还要创建一个新对象？
以下是我修改后的代码：
function DrawImage(iwidth,iheight){
$('img[class=bigimage]').each(function(){
/* var image=new Image();
image.src=this.src;
if ($.browser.safari) {
//如果是 safari浏览器，则要设置image的Width和height，
//经过测试 发现safari浏览器 如果不设置图片大小<img src="a.jpg">
//得到的Width和height 都是0
//其他浏览器得到的则是原始Width和height
image.width=this.width;
image.height=this.height;
}*/
var bl=this.width/this.height; //得到原始图片Width和height的比例
$(this).attr('width',iwidth); // 设置显示图片的Width
//alert($(this).attr('width')); //在ie中 此方法无效，在safari，FF，谷歌浏览器中都可以得到正确值
//alert(this.width);
//alert($(this).width()); //此方法在ie、safari、FF、谷歌浏览器中通用
$(this).attr('height',iwidth/bl); //根据Width和比例（bl）设置height
$(this).show();
});
}
修改之后 发现图片不显示了，具体原因，因为能力有限，还希望看到的高手可以解释一二，大家一起学习。
细心的人应该也发现了 body中包含的<div>、及img标签中 onmouseover 和onmouseout事件，其主要实现了小图看大图的效果（有点粗糙）
先贴代码：
function showimage(thi){
var temp=thi.width/thi.height;
$("#m img:first-child").attr('src',thi.src);
$("#m img:first-child").attr('width',thi.width*3); //设置图片为原来的3倍
$("#m img:first-child").attr('height',(thi.width*3)/temp); //通过Width和比例设置height
$("#m img:first-child").attr('title','');
$("#m").show(); //显示图片
$("#m").css('top',event.clientY); //通过Jquery对象设置Div的top
//$("#m")[0].style.top=event.clientY; //通过Dom对象设置Div的top
$("#m").css('left',event.clientX); //通过Jquery对象设置Div的left
//$("#m")[0].style.left=event.clientX; //通过Dom对象设置Div的left
}
function pichide(){
$("#m").hide(); //隐藏Div 也就是隐藏图片
}
综上所述，基本把等比例缩放，以及小图看大图的功能实现了，但还是有点粗糙（Div的位置没有很好的控制），以后有时间的话会慢慢的改进。
有什么不同的看法、或者不同的想法，欢迎大家拍砖、灌水，当然更欢迎高手的指导， 目的只有一个，那就是大家一起讨论、学习。
