本js特效代碼兼容：ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等瀏覽器
$(function() {
//模塊初始化
imgZoomInit();
})
function imgZoomInit() {
$('.piclist li.pic').append(function() {
ht = $(this).find('.in').html();
return "<div class='original'>" + ht + "</div>";
});
$(".piclist li.pic .in img").each(function(i) {
var img = $(this);
var realWidth; //原始寬度
var realHeight; //原始高度
var vs; //圖片寬高比
realWidth = this.width;
realHeight = this.height;
vs = realWidth / realHeight;
//縮略圖比例230:142(約等于1.62)
if (vs >= 1.62) { //橫圖則固定高度
$(img).css("width", "auto").css("height", "142px").css("marginLeft", 115 - (71 * realWidth / realHeight) + "px");
} else { //豎圖則固定寬度
$(img).css("width", "230px").css("height", "auto").css("marginTop", 71 - (115 * realHeight / realWidth) + "px");
}
//圖片放大水平垂直居中顯示
if (vs >= 1) { //橫圖或正方形
$(img).parent().parent().parent().find('.original img').height(260);
$(img).parent().parent().parent().find('.original img').width('auto');
$(img).parent().parent().parent().find('.original').css({
//此處需結合實際情況計算 左偏移：.original實際寬度的二分之一
marginLeft: function() {
return -(130 * realWidth / realHeight) - 6;
},
left: '50%'
})
} else { //豎圖
$(img).parent().parent().parent().find('.original img').width(260);
$(img).parent().parent().parent().find('.original img').height('auto');
$(img).parent().parent().parent().find('.original').css({
//此處需結合實際情況計算 上偏移：.original實際高度的二分之一
marginTop: function() {
return -(130 * realHeight / realWidth) - 36;
},
top: '50%'
});
$(img).parent().parent().parent().find('.original b').css('display', 'block')
}
});
$('.piclist li.pic').hover(function() {
$(this).addClass('on');
}, function() {
$(this).removeClass('on');
})
$(".piclist ul li:nth-child(4n)").addClass('r');
}jQuery鼠標懸停在圖片上顯示說明按鈕的HoverEx插件
jquery hover網頁左側鼠標懸停列表改變菜單樣式特效
jquery仿win8風格的圖片九宮格布局，鼠標懸停圖片文字切換特效
jquery實現中英文字切換導航條，鼠標懸停滑動下拉二級導航菜單
jquery實現圖片放大鏡插件，鼠標懸停局部圖片放大鏡頭顯示特效
