jQuery實現(xiàn)圖片加載完成后改變圖片大小的方法
本文實例講述了jQuery實現(xiàn)圖片加載完成后改變圖片大小的方法。分享給大家供大家參考,具體如下:
要改變圖片的大小并不難,可以用jQuery操作css改變。但是前提是要判斷圖片是否加載完成。主要是通過jQuery的load事件和onreadystatechange來判斷其狀態(tài)。
對于IE6,用onreadystatechange可以直接處理,在IE7中,則需要用定時器來判斷圖片的readystate狀態(tài)。而對于FF和Chrome剛可以直接用load事件來判斷。
以下是在實例中使用的完整代碼:
<script type="text/javascript"> $(document).ready(function(){ function changeSize(obj){ //本函數(shù)用于在圖片加載時對圖片大小等進行設(shè)置 w=obj.width(); h=obj.height(); t=obj.attr("title"); src=obj.attr("src"); obj.width(w>400?400:w); obj.height(w>400?(400/w)*h:h); obj.css("cursor","pointer"); obj.click(function(){ $("#picDlg").html("<img src="+src+" border=0/>").fadeIn(1000).dialog({ width:"auto", height:"auto", title:t, modal:true, draggable:false, resizable:false }) }) } if($.browser.msie){ //IE 6.0 if($.browser.version==6.0){ $(".bodyLeft img").each(function(ind,ele){ // ele.onreadystatechange =function(){ if(ele.readyState == "complete"||ele.readyState=="loaded"){ changeSize($(this)); } //} }) } //IE 6.0以上 else{ $(".bodyLeft img").each(function(){ tempTimer=window.setInterval(function(ind,ele){ if(ele.readyState=="complete"){ window.clearInterval(tempTimer); changeSize($(this)); } else{ return; } },200); }) } } //FF,Chrome else{ $(".bodyLeft img").each(function(ind,ele){ alert(ele.complete); if(ele.complete==true){ changeSize($(this)); } }) } }) </script>
上面的圖片可以將圖片等比例縮小顯示在文章中,同時使用的jQuery的Dialog UI組件單擊圖片時,以一個層顯示完整大小的圖片。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jquerymobile checkbox及時刷新才能獲取其準(zhǔn)確值
一般登錄的時候 都有個記住用戶名 記住密碼 的兩個checkbox 多選框用jquerymobile 做頁面 ,當(dāng)勾選checkbox 時總是不能獲取它正確的值2012-04-04jQuery添加新內(nèi)容的四個常用方法分析【append,prepend,after,before】
這篇文章主要介紹了jQuery添加新內(nèi)容的四個常用方法,結(jié)合實例形式分析了jQuery元素添加append,prepend,after,before四種方法的功能與相關(guān)使用技巧,需要的朋友可以參考下2019-03-03