<body style="margin:0px" οnlοad="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' οnmοuseοver="showimage(this)" style="display:none;cursor:hand;" title='' οnmοuseοut="pichide();" >
<img class="bigimage" src='b.jpg' οnmοuseοver="showimage(this)" style="display:none;cursor:hand;" title='' οnmοuseοut="pichide();" >
<img class="bigimage" src='c.jpgs' οnmοuseοver="showimage(this)" style="display:none;cursor:hand;" title='' οnmοuseοut="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();
});
}
$( ' 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();
});
}
$( ' 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 也就是隐藏图片
}
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的位置没有很好的控制），以后有时间的话会慢慢的改进。
有什么不同的看法、或者不同的想法，欢迎大家拍砖、灌水，当然更欢迎高手的指导， 目的只有一个，那就是大家一起讨论、学习。
14万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
