jquery實(shí)現(xiàn)頁(yè)面圖片等比例放大縮小功能
更新時(shí)間：2014年02月12日 11:16:30 作者：
本文將利用jquery實(shí)現(xiàn)頁(yè)面圖片等比例放大和縮小。說(shuō)明: 頁(yè)面中經(jīng)常需要將未知大小的圖片展示在有限的空間里, 如果直接指定圖片的width和height值, 就有可能造成圖片走樣, 這段代碼就是為解決這個(gè)問(wèn)題設(shè)計(jì)
html代碼結(jié)構(gòu):
復(fù)制代碼 代碼如下:
<a href=""><img src="images/tmp_376x470.jpg" width="300" height="300" alt=""/></a>
<a href=""><img src="images/tmp_409x265.jpg" width="300" height="300" alt=""/></a>
<a href=""><img src="images/tmp_572x367.jpg" width="300" height="300" alt=""/></a>
樣式:
復(fù)制代碼 代碼如下:
a{width:300px;height:300px;background:#fff;border:1px solid #666;display:inline-block} /* 這里需要指定a標(biāo)簽的高寬,背景和邊框?yàn)榭蛇x */
腳本(jquery可自行添加):
復(fù)制代碼 代碼如下:
$(function () {
var imgs = $('a>img');
imgs.each(function () {
var img = $(this);
var width = img.attr('width');//區(qū)域?qū)挾?BR> var height = img.attr('height');//區(qū)域高度
var showWidth = width;//最終顯示寬度
var showHeight = height;//最終顯示高度
var ratio = width / height;//寬高比
img.load(function () {
var imgWidth, imgHeight, imgratio;
$('<img />').attr('src', img.attr('src')).load(function () {
imgWidth = this.width;//圖片實(shí)際寬度
imgHeight = this.height;//圖片實(shí)際高度
imgRatio = imgWidth / imgHeight;//實(shí)際寬高比
if (ratio > imgRatio) {
showWidth = height * imgRatio;//調(diào)整寬度太小
img.attr('width', showWidth).css('margin-left', (width - showWidth) / 2);
} else {
showHeight = width / imgRatio;//調(diào)高度太小
img.attr('height', showHeight).css('margin-top', (height - showHeight) / 2);
}
});
});
});
});
這樣就是實(shí)現(xiàn)了圖片的等比例放大縮小了。
相關(guān)文章
本篇文章主要是對(duì)SinaEditor使用方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
jQuery CSS3自定義美化Checkbox實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery CSS3自定義美化Checkbox實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
jquery ajax局部加載方法詳解(實(shí)現(xiàn)代碼)
下面想就為大家?guī)?lái)一篇jquery ajax局部加載方法詳解(實(shí)現(xiàn)代碼)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-05-05
基于JQuery的多標(biāo)簽實(shí)現(xiàn)代碼
最近在學(xué)習(xí)JQuery，其實(shí)也不叫學(xué)習(xí)，很久以前就學(xué)過(guò)，只是有一段時(shí)間沒(méi)用，有些生疏了，于是就做幾個(gè)小例子來(lái)練習(xí)練習(xí)，為了方便以后查找就將這些小示例記錄下來(lái)2012-09-09
jQuery 自動(dòng)增長(zhǎng)的文本輸入框?qū)崿F(xiàn)代碼
文本輸入框內(nèi)的字?jǐn)?shù)不能確定，而input type="text"的size是固定的，當(dāng)字?jǐn)?shù)超過(guò)size時(shí)（默認(rèn)是20），先輸入的內(nèi)容就會(huì)從文本框的左端隱藏起來(lái)，不便于輸入。2010-04-04
基于jquery的loading 加載提示效果實(shí)現(xiàn)代碼
有時(shí)候?yàn)榱烁玫挠脩趔w驗(yàn)，使用jquery的朋友可以參考下代碼。2011-09-09
輕松實(shí)現(xiàn)jQuery添加刪除按鈕Click事件
這篇文章主要為大家詳細(xì)介紹了如何輕松實(shí)現(xiàn)jQuery添加刪除按鈕Click事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
給jQuery方法添加回調(diào)函數(shù)一款插件的應(yīng)用
本插件用于給jQuery方法添加回調(diào)函數(shù)，可在類方法或?qū)嵗椒ㄌ砑尤魏巫远x的回調(diào)函數(shù)而不影響原方法的行為,感興趣的朋友可以了解下，希望本文對(duì)你有所幫助2013-01-01
jquery讀取xml文件實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的方法
這篇文章主要介紹了jquery讀取xml文件實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的方法,涉及jQuery操作XML文件及Ajax動(dòng)態(tài)加載的技巧,需要的朋友可以參考下2015-05-05
jquery 獲取json數(shù)據(jù)實(shí)現(xiàn)代碼
jquery json數(shù)據(jù)獲取代碼。2009-04-04