需求1：做项目的时候有这么样一个需求，需要把两张图片放在一个div里预览，两张图片只有大小限制，没有尺寸限制，要求缩放图片时要把两张图片等比例放在div里面，图片较小时不拉伸。
分析：由于两张图片虽然大小没有限制，但大图一般在500*400，小图一般是200*300，而div由于页面布局的限制，固定在420*240，于是粗略地将左右侧分割为：300*240,110*240两部分，页面缩放后效果图如下：
具体实现方式如下：
jn.pl.material.ChooseTpl.prototype._scaleImg = function (img, maxWidth, maxHeight) {
//缩放第一张图片
if (img.width > 0 && img.height > 0) {
var rate = (maxWidth / img.width < maxHeight / img.height ?
maxWidth / img.width : maxHeight / img.height);
}
var newImg = {};
if (rate < 1) {
newImg.width = (img.width) * rate;
newImg.height = (img.height) * rate;
} else {
newImg.width = maxWidth;
newImg.height = maxHeight;
}
return newImg;
};
//缩放图片尺寸
var imgContainers = baidu.q(\'preview-img-container\');
baidu.each(imgContainers, function(item){
var img1 = item.children[0];
var newImg1 = me._scaleImg(img1, 300, 240);
img1.width = newImg1.width;
img1.height = newImg1.height;
var img2 = item.children[1];
var newImg2 = me._scaleImg(img2, 110, 240);
img2.width = newImg2.width;
img2.height = newImg2.height;
});
这个页面在ie下样式出了点小问题，
<div>
<span style=”float:left”>左侧样式</span>
<span style=”float:right”>查看大图</span>
</div>
这种情况下必须强制给div一个height,否则“左侧样式”和”查看大图”会折成两行。
需求2：页面上有查看大图功能，要求鼠标放上去的时候能够出现一个浮层可以显示图片的真实尺寸，浮层与“查看大图”链接右对齐。
实现方式如下：
me.list.delegateEvent(\'mouseover\');
me.list.delegateEvent(\'mouseout\');
me.list.addListener(\'CMD:mouseover:SHOW_PIC\', function(anchor) {
var leftId = anchor.getAttribute("data-id");
var picDiv = baidu.g(\'show-big-pic-\' + leftId);
baidu.show(picDiv);
if (anchor.tagName.toLowerCase() == \'a\') {
var position = baidu.dom.getPosition(anchor);
picDiv.style.left = (position.left - picDiv.offsetWidth + 60) + \'px\';
picDiv.style.top = (position.top + 15) + \'px\';
}
});
me.list.addListener(\'CMD:mouseout:SHOW_PIC\', function(anchor) {
var leftId = anchor.getAttribute("data-id");
var picDiv = baidu.g(\'show-big-pic-\' + leftId);
baidu.hide(picDiv);
});
注意：这里取大图的尺寸要使用offsetWidth而不是width,因为offsetWidth是numeric,能参与计算，而width是string.
offsetWidth和width(标准中的值)一样，指的是content+padding+border,如果有vertical scrollbar,则包含其值（这不同于clientWidth）.