jquery實(shí)現(xiàn)根據(jù)瀏覽器窗口大小自動(dòng)縮放圖片的方法
本文實(shí)例講述了jquery實(shí)現(xiàn)根據(jù)瀏覽器窗口大小自動(dòng)縮放圖片的方法。分享給大家供大家參考。具體如下:
(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);
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
- 基于jquery實(shí)現(xiàn)等比縮放圖片
- 用jquery實(shí)現(xiàn)等比例縮放圖片效果插件
- jQuery設(shè)置圖片等比例縮小的方法
- 基于jQuery的圖片不完全按比例自動(dòng)縮小
- jquery實(shí)現(xiàn)圖片按比例縮放示例
- jquery實(shí)現(xiàn)頁面圖片等比例放大縮小功能
- 用jquery等比例控制圖片寬高的具體實(shí)現(xiàn)
- jQuery實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
- jquery圖片不完全按比例自動(dòng)縮小的簡(jiǎn)單代碼
- jquery實(shí)現(xiàn)圖片等比例縮放以及max-width在ie中不兼容解決
- jquery 圖片上傳按比例預(yù)覽插件集合
- jquery 圖片預(yù)加載 自動(dòng)等比例縮放插件
- jQuery實(shí)現(xiàn)按比例縮放圖片的方法
相關(guān)文章
jQuery實(shí)現(xiàn)的簡(jiǎn)單動(dòng)態(tài)添加、刪除表格功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單動(dòng)態(tài)添加、刪除表格功能,涉及jQuery事件響應(yīng)及表格元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09使用jQuery validate 驗(yàn)證注冊(cè)表單實(shí)例演示
Validation是jQuery的插件,提供的方法可以大大簡(jiǎn)化驗(yàn)證表單的工作,接下來為大家詳細(xì)介紹下使用方法,感興趣的各位可以參考下哈2013-03-03jquery+css3實(shí)現(xiàn)會(huì)動(dòng)的小圓圈效果
這篇文章主要介紹了jquery+css3實(shí)現(xiàn)會(huì)動(dòng)的小圓圈效果,涉及jquery基于時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素css3樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01jQuery中常用的遍歷函數(shù)用法實(shí)例總結(jié)
這篇文章主要介紹了jQuery中常用的遍歷函數(shù)用法,以實(shí)例形式分析并總結(jié)了jquery中常見的遍歷函數(shù)使用方法與注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09初學(xué)Jquery插件制作 在SageCRM的查詢屏幕隱藏部分行的功能
SageCRM的查詢條件屏幕的條件比較多,會(huì)占用界面,用戶希望首先顯示常用的查詢條件,然后點(diǎn)擊展開的按鈕,可以看到一些不常用的查詢條件2011-12-12基于JQuery的$.ajax方法進(jìn)行異步請(qǐng)求導(dǎo)致頁面閃爍的解決辦法
這篇文章主要介紹了基于JQuery的$.ajax方法進(jìn)行異步請(qǐng)求導(dǎo)致頁面閃爍的解決辦法的相關(guān)資料,非常具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05Colortip基于jquery的信息提示框插件在IE6下面的顯示問題修正方法
今天看到了MK的這篇文章,然后其中的Colortip這個(gè)jQuery插件引起了我的注意,倒不是因?yàn)樗缕?,而是我之前看到過,沒想到它就成了2010年最佳之一了2010-12-12jquery+php后臺(tái)實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)功能示例
這篇文章主要介紹了jquery+php后臺(tái)實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)功能,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)變換,以及ajax后臺(tái)動(dòng)態(tài)交互相關(guān)操作技巧,需要的朋友可以參考下2019-05-05