Jquery動態(tài)進行圖片縮略的原理及實現(xiàn)
更新時間：2013年08月13日 16:45:40 作者：
圖片縮略在某些情況下還是比較實用的，比如在做一些商品的預(yù)覽圖縮略等等，下面為大家介紹下具體的實現(xiàn)思路及代碼，有需求的朋友可以參考下
復(fù)制代碼 代碼如下:
//頁面加載完執(zhí)行resizeImage()函數(shù)
$(document).ready(resizeImage());
function resizeImage(){
$(".pic a img").each(function(){
//加載圖片至內(nèi)存，完成后執(zhí)行
$(this).load(function(){
//獲得原始圖片高寬
var imgWidth = $(this).width();
var imgHeight = $(this).height();
//獲得圖片所在Div高寬
var boxWidth=$('.pic').width();
var boxHeight=$('.pic').height();
//比較imgBox的長寬比與img的長寬比大小
if((boxWidth/boxHeight)>=(imgWidth/imgHeight))
{
//重新設(shè)置img的width和height
$(this).width((boxHeight*imgWidth)/imgHeight);
$(this).height(boxHeight);
//讓圖片居中顯示
var margin=(boxWidth-$(this).width())/2;
$(this).css("margin-left",margin);
}
else
{
//重新設(shè)置img的width和height
$(this).width(boxWidth);
$(this).height((boxWidth*imgHeight)/imgWidth);
//讓圖片居中顯示
var margin=(boxHeight-$(this).height())/2;
$(this).css("margin-top",margin);
}
});
})
}
相關(guān)文章
下面小編就為大家?guī)硪黄猨Query 局部div刷新和全局刷新方法總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了jquery實現(xiàn)二級導(dǎo)航下拉菜單效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
jQuery插件HighCharts實現(xiàn)的2D對數(shù)餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)的2D對數(shù)餅圖效果,結(jié)合實例形式分析了jQuery圖形插件HighCharts繪制2D對數(shù)餅圖的具體實現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery Easyui datagrid連續(xù)發(fā)送兩次請求問題
用上述方式動態(tài)加載datagrid的數(shù)據(jù)時，通過net監(jiān)聽，發(fā)現(xiàn)調(diào)用了兩遍XX方法，目前的解決方案是，將url放到datagrid初始化的時候執(zhí)行2016-12-12
這篇文章主要介紹了jQuery的基本概念與高級編程的簡單介紹，有需要的小伙伴可以參考下。2015-05-05
jQuery判斷網(wǎng)頁是否已經(jīng)滾動到瀏覽器底部的實現(xiàn)方法
最近做項目遇到這樣的需求，要求基于jq判斷網(wǎng)頁是否已經(jīng)滾動到瀏覽器底部了，下面小編給大家分享實例代碼，需要的朋友參考下吧2017-10-10
proxy()主要用于在同樣的上下文語境中指向另一個對象,下面我們就以實例解析jQuery中proxy()函數(shù)的用法,需要的朋友可以參考下2016-05-05
這篇文章主要向大家推薦了一個jquery無限級聯(lián)下拉菜單簡單實例演示，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了jQuery實現(xiàn)王者榮耀手風(fēng)琴效果的代碼內(nèi)容，需要的朋友們可以學(xué)習(xí)下。2020-01-01
用JQuery 判斷某個屬性是否存在hasAttr的解決方法
本篇文章介紹了，用JQuery 判斷某個屬性是否存在hasAttr的解決方法。需要的朋友參考下2013-04-04