JS自動(dòng)縮小超出大小的圖片
更新時(shí)間：2012年10月12日 18:03:20 作者：
在文章的正文中，往往會(huì)出現(xiàn)一些超大的圖片，把頁(yè)面撐開變形，影響了美觀。用這段JS代碼就可解決這個(gè)問(wèn)題，你可以把圖片的最大值限定在一定范圍內(nèi)，當(dāng)圖片大小超出這個(gè)尺寸后，就會(huì)被自動(dòng)按比例縮小
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.LoadImage=function(scaling,width,height,loadpic){
if(loadpic==null)loadpic="../img/loading.gif";
return this.each(function(){
var t=$(this);
var src=$(this).attr("src")
var img=new Image();
img.src=src;
//自動(dòng)縮放圖片
var autoScaling=function(){
if(scaling){
if(img.width>0 && img.height>0){
if(img.width/img.height>=width/height){
if(img.width>width){
t.width(width);
t.height((img.height*width)/img.width);
}else{
t.width(img.width);
t.height(img.height);
}
}
else{
if(img.height>height){
t.height(height);
t.width((img.width*height)/img.height);
}else{
t.width(img.width);
t.height(img.height);
}
}
}
}
}
//處理ff下會(huì)自動(dòng)讀取緩存圖片
if(img.complete){
autoScaling();
return;
}
$(this).attr("src","");
var loading=$("<img alt=\"加載中...\" title=\"圖片加載中...\" src=\""+loadpic+"\" />");
t.hide();
t.after(loading);
$(img).load(function(){
autoScaling();
loading.remove();
t.attr("src",this.src);
t.show();
});
} );
}
</script>
<div id="content"><img src="img/20120518073933709.jpg"/></div>
<script type="text/javascript">
<!--
$(window).load(function(){
$('#content img').LoadImage(true, 600,500,'img/loading.gif');
});
//-->
</script>
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了jQuery中DOM操作方法,實(shí)例分析了dom對(duì)象的創(chuàng)建、屬性的修改、樣式的修改、動(dòng)態(tài)綁定事件等技巧,需要的朋友可以參考下2015-01-01
jQuery+PHP實(shí)現(xiàn)動(dòng)態(tài)數(shù)字展示特效
我們?cè)谝恍?yīng)用中需要?jiǎng)討B(tài)展示數(shù)據(jù)，比如當(dāng)前在線人數(shù)，當(dāng)前交易總額，當(dāng)前匯率等等，前端頁(yè)面需要實(shí)時(shí)刷新獲取最新數(shù)據(jù)。本文將結(jié)合實(shí)例給大家介紹使用jQuery和PHP來(lái)實(shí)現(xiàn)動(dòng)態(tài)數(shù)字展示效果。2015-03-03
jQuery實(shí)現(xiàn)仿騰訊視頻列表分頁(yè)效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿騰訊視頻列表分頁(yè)效果的方法,涉及jquery頁(yè)面元素的運(yùn)算與動(dòng)態(tài)調(diào)用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
jQuery實(shí)現(xiàn)非常實(shí)用漂亮的select下拉菜單選擇效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)非常實(shí)用漂亮的select下拉菜單選擇效果,通過(guò)jQuery模擬select下拉選擇效果,并具有點(diǎn)擊選中下拉項(xiàng)進(jìn)入輸入框的功能,非常美觀實(shí)用,需要的朋友可以參考下2015-11-11
jQuery progressbar通過(guò)Ajax請(qǐng)求實(shí)現(xiàn)后臺(tái)進(jìn)度實(shí)時(shí)功能
這篇文章主要介紹了jQuery progressbar通過(guò)Ajax請(qǐng)求實(shí)現(xiàn)后臺(tái)進(jìn)度實(shí)時(shí)功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
據(jù)jQuery官方博客5月3日的最新消息，jQuery 1.6 正式版已經(jīng)可以下載使用。jQuery 1.6 版本包括了對(duì)屬性(Attribute)模型的重要重寫，還有諸多性能優(yōu)化。借此機(jī)會(huì)感謝jQuery開發(fā)團(tuán)隊(duì)和jQuery錯(cuò)誤分類團(tuán)隊(duì)的成員。2011-05-05
jQuery實(shí)現(xiàn)點(diǎn)擊自身以外區(qū)域關(guān)閉彈出層功能完整示例【改進(jìn)版】
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊自身以外區(qū)域關(guān)閉彈出層功能,結(jié)合具體實(shí)例形式分析了jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)彈出層打開與關(guān)閉相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
jQuery實(shí)現(xiàn)廣告顯示和隱藏動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)廣告顯示和隱藏動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
jQuery如何使用自動(dòng)觸發(fā)事件trigger
這篇文章主要介紹了jQuery如何使用自動(dòng)觸發(fā)事件trigger，需要的朋友可以參考下2015-11-11
jquery顯示loading圖片直到網(wǎng)頁(yè)加載完成的方法
這篇文章主要介紹了jquery顯示loading圖片直到網(wǎng)頁(yè)加載完成的方法,涉及jquery頁(yè)面加載與動(dòng)畫效果的使用技巧,需要的朋友可以參考下2015-06-06