jquery 筆記. tooltip 圖片.

tooltip + 預載圖片 + 限制寬高比例.
另外還有 tooltip 浮動圖片 偵測 Left 與 Top ;

$('a.tooltip').mouseover(function(e){
var img = new Image(); //預載圖片
img.src = $(this).attr('href');
var div = ['<div id="tooltip_img" style="display:none;z-index:100;position:absolute;border:2px solid #666; padding:3px;background-color:#eee;"><img src='+$(this).attr('href')+' /></div>'].join('');
$('body').append(div);
var _w = img.width ;
var _h = img.height;
var maxW = 250; //預設圖片最大寬度
var maxH = 300; //預設圖片最大高度
var HeightWidth = _h / _w; //設置高寬比
var WidthHeight = _w / _h; //設置寬高比
if (_w > maxW ) {
_w = maxW ;
_h = maxW * HeightWidth ;
}
if (_h > maxH ) {
_w = maxH * WidthHeight;
_h = maxH ;
}
$('#tooltip_img img').attr('width',_w);
$('#tooltip_img img').attr('height',_h);
var left = e.pageX+20;
var top = e.pageY+20;
v = viewport();
// 偵測水平
if (v.x + v.cx < left+_w ) {
left -= _w+40 ;
}
// 偵測垂直
if (v.y + v.cy < top + _h ) {
top -= _h+40 ;
}
$('#tooltip_img').css({'top':top+'px','left':left+'px'}).show();
}).mouseout(function(e){
$('#tooltip_img').remove();
});
// 取得瀏覽器　寬高
function viewport() {
return {
x: $(window).scrollLeft(),　//scroll Bar
y: $(window).scrollTop(), //Sscroll Bar
cx: $(window).width(), //螢幕寬高
cy: $(window).height() //螢幕寬高
};
}