jquery實現(xiàn)根據(jù)瀏覽器窗口大小自動縮放圖片的方法
更新時間:2015年07月17日 10:00:06 作者:答復(fù)哈
這篇文章主要介紹了jquery實現(xiàn)根據(jù)瀏覽器窗口大小自動縮放圖片的方法,涉及jquery操作頁面元素屬性與樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jquery實現(xiàn)根據(jù)瀏覽器窗口大小自動縮放圖片的方法。分享給大家供大家參考。具體如下:
(function($){
$.fn.resizeimage = function(){
var imgLoad = function (url, callback) {
var img = new Image();
img.src = url;
if (img.complete) {
callback(img.width, img.height);
} else {
img.onload = function () {
callback(img.width, img.height);
img.onload = null;
};
};
};
var original = {
width:$(window).width()
};
return this.each(function(i,dom){
var image = $(this);
imgLoad(image.attr('src'),function(){
var img = {
width:image.width(),
height:image.height()
},percentage=1;
if(img.width<original.width){
percentage = 1;
}else{
percentage = (original.width)/img.width;
}
image.width(img.w=img.width*percentage-30).height(img.h=img.height*percentage);
$(window).resize(function(){
var w = $(this).width();
percentage = w/img.width>1?1:w/img.width;
var newWidth = img.width*percentage-30;
var newHeight = img.height*percentage;
image.width(newWidth).height(newHeight);
});
});
});
};
})(jQuery);
希望本文所述對大家的jquery程序設(shè)計有所幫助。
您可能感興趣的文章:
- 基于jquery實現(xiàn)等比縮放圖片
- 用jquery實現(xiàn)等比例縮放圖片效果插件
- jQuery設(shè)置圖片等比例縮小的方法
- 基于jQuery的圖片不完全按比例自動縮小
- jquery實現(xiàn)圖片按比例縮放示例
- jquery實現(xiàn)頁面圖片等比例放大縮小功能
- 用jquery等比例控制圖片寬高的具體實現(xiàn)
- jQuery實現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
- jquery圖片不完全按比例自動縮小的簡單代碼
- jquery實現(xiàn)圖片等比例縮放以及max-width在ie中不兼容解決
- jquery 圖片上傳按比例預(yù)覽插件集合
- jquery 圖片預(yù)加載 自動等比例縮放插件
- jQuery實現(xiàn)按比例縮放圖片的方法
相關(guān)文章
日期時間范圍選擇插件:daterangepicker使用總結(jié)(必看篇)
下面小編就為大家?guī)硪黄掌跁r間范圍選擇插件:daterangepicker使用總結(jié)(必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09

