用jquery等比例控制圖片寬高的具體實現(xiàn)

更新時間：2014年01月28日 16:43:19 投稿：whsnow

控制圖片寬高的方法有很多，下面為大家介紹下使用jquery是如何實現(xiàn)的，感興趣的朋友可以學習下

核心代碼：

$(function() { 
$(".dvcontent img").each(function() { 
var maxwidth = 520; 
if ($(this).width() > maxwidth) { 
var oldwidth = $(this).width(); 
var oldheight = $(this).height(); 
var newheight = maxwidth/oldwidth*oldheight; 
$(this).css({width:maxwidth+"px",height:newheight+"px",cursor:"pointer"}); 
$(this).attr("title","點擊查看原圖"); 
$(this).click(function(){window.open($(this).attr("src"))}); 
} 
}); 
});

如果上面的代碼不能執(zhí)行，可以使用下面的代碼：

$(window).load(function() {
	$(".dvcontent img").each(function() { 
	var maxwidth = 600; 
	if ($(this).width() > maxwidth) { 
	var oldwidth = $(this).width(); 
	var oldheight = $(this).height(); 
	var newheight = maxwidth/oldwidth*oldheight; 
	$(this).css({width:maxwidth+"px",height:newheight+"px",cursor:"pointer"}); 
	$(this).attr("title","點擊查看原圖"); 
	$(this).click(function(){window.open($(this).attr("src"))}); 
	} 
	}); 
});

通過css還有一種方法兼容IE6能讓圖片在超過規(guī)定的寬度時自動按比例縮小，但該寫法不符合W3C標準。代碼如下：

.cate img{
    max-width: 600px; 
    height:auto; 
    width:expression(this.width > 600 ? "600px" : this.width);
 }

所以在做到盡量兼容IE和其他瀏覽器以及符合W3C的標準下就通過js來控制圖片的寬度了，下面使用jquery控制圖片顯示時的最大寬度，主代碼如下：

$(window).load(function() {
    $(".cate img").each(function() {
        var maxwidth = 600;
        if ($(this).width() > maxwidth) {
            $(this).width(maxwidth);
        }
    });
});

代碼很簡單，就是cate樣式下的所以img的最大寬度只能為600px。.each(function(){......})，each在這里是對指定的圖片集合對象逐一調(diào)用下面的方法。這種jquery方法在IE6及以上瀏覽器和chrome及Firefox上都能實現(xiàn)控制圖片顯示時的最大寬度。

您可能感興趣的文章:

當鼠標移動到圖片上時跟隨鼠標顯示放大的圖片效果
當鼠標移動到圖片上時，跟隨鼠標顯示放大顯示的圖片，具體效果情況截圖，另附送源碼，感興趣的朋友可以學習下哈
2013-06-06
jquery獲得option的值和對option進行操作
本文為大家介紹下jquery獲得option的值和對option的操作，下面有不錯的示例分析及示例代碼，感興趣的朋友可以了解下
2013-12-12
jquery文檔操作wrap()方法實例簡述
這篇文章主要介紹了jquery文檔操作wrap()方法,以實例形式簡單分析了wrap()方法用某個標簽將某個元素包起來的使用技巧,需要的朋友可以參考下
2015-01-01
基于JQuery實現(xiàn)異步刷新的代碼(轉載)
JQuery，是輕量級的js庫,把繁瑣的js代碼封裝，使調(diào)用更簡單，完成更多功能。同樣，封裝了js利用XMLHttpRequest實現(xiàn)的異步刷新.
2011-03-03
jQuery常用數(shù)據(jù)處理方法小結
這篇文章主要介紹了jQuery常用數(shù)據(jù)處理方法,實例總結了trim、param、isArray、isFunction、each等jQuery常用的數(shù)據(jù)處理方法,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
JQuery+div+css 無限級聯(lián)樹實現(xiàn)代碼
JQuery+div+css 無限級聯(lián)樹實現(xiàn)代碼，需要的朋友可以參考下。
2010-03-03
通過JQuery將DIV的滾動條滾動到指定的位置方便自動定位
本文為大家介紹下將DIV的滾動條滾動到其子元素所在的位置，方便自動定位,需要的朋友可以參考下
2014-05-05
jQuery CSS()方法改變現(xiàn)有的CSS樣式表
使用CSS()方法改變現(xiàn)有的CSS樣式表，css()方法在使用上具有多樣性，比如要改變鏈接顏色，如果需要改變多個樣式屬性，可先定義屬性變量，然后直接賦值給css()方法
2014-09-09
animate動畫示例(淚奔的小孩)及stop和delay的使用
實現(xiàn)原理：停止動畫，當一個元素有一個動畫隊列時，停止的是當前動畫，緊接著執(zhí)行下一個動畫，具體代碼如下，感興趣的朋友可以參考下哈，希望對你學習jquery動畫有所幫助
2013-05-05
jQuery實現(xiàn)數(shù)字華容道小游戲(實例代碼)
這篇文章主要介紹了jQuery實現(xiàn)數(shù)字華容道小游戲功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2020-01-01