jQuery實(shí)現(xiàn)圖片加載完成后改變圖片大小的方法
本文實(shí)例講述了jQuery實(shí)現(xiàn)圖片加載完成后改變圖片大小的方法。分享給大家供大家參考,具體如下:
要改變圖片的大小并不難,可以用jQuery操作css改變。但是前提是要判斷圖片是否加載完成。主要是通過jQuery的load事件和onreadystatechange來判斷其狀態(tài)。
對(duì)于IE6,用onreadystatechange可以直接處理,在IE7中,則需要用定時(shí)器來判斷圖片的readystate狀態(tài)。而對(duì)于FF和Chrome剛可以直接用load事件來判斷。
以下是在實(shí)例中使用的完整代碼:
<script type="text/javascript"> $(document).ready(function(){ function changeSize(obj){ //本函數(shù)用于在圖片加載時(shí)對(duì)圖片大小等進(jìn)行設(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>
上面的圖片可以將圖片等比例縮小顯示在文章中,同時(shí)使用的jQuery的Dialog UI組件單擊圖片時(shí),以一個(gè)層顯示完整大小的圖片。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery限制圖片大小的方法
- 基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼
- 基于jQuery的圖片大小自動(dòng)適應(yīng)實(shí)現(xiàn)代碼
- jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享
- 使用jQuery清空file文件域的解決方案
- jquery(live)中File input的change方法只起一次作用的解決辦法
- jQuery動(dòng)態(tài)添加 input type=file的實(shí)現(xiàn)代碼
- jQuery獲取file控件中圖片的寬高與大小
相關(guān)文章
jquerymobile checkbox及時(shí)刷新才能獲取其準(zhǔn)確值
一般登錄的時(shí)候 都有個(gè)記住用戶名 記住密碼 的兩個(gè)checkbox 多選框用jquerymobile 做頁面 ,當(dāng)勾選checkbox 時(shí)總是不能獲取它正確的值2012-04-04jQuery添加新內(nèi)容的四個(gè)常用方法分析【append,prepend,after,before】
這篇文章主要介紹了jQuery添加新內(nèi)容的四個(gè)常用方法,結(jié)合實(shí)例形式分析了jQuery元素添加append,prepend,after,before四種方法的功能與相關(guān)使用技巧,需要的朋友可以參考下2019-03-03jQuery循環(huán)滾動(dòng)新聞列表示例代碼
jquery實(shí)現(xiàn)點(diǎn)擊公告的上一條下一條來查看滾動(dòng)條,示例代碼如下,希望對(duì)大家有所幫助2014-06-06jQuery實(shí)現(xiàn)的類flash菜單效果代碼
這里要說的就是一個(gè)菜單的hover的效果,一般我們通過CSS的偽類:hover實(shí)現(xiàn)的菜單切換都比較單調(diào),因?yàn)閮H僅是一個(gè)簡(jiǎn)單的圖片的變化,不像很多flash菜單一樣變化非常的平滑,但是這里我們就是要用非flash的技術(shù)實(shí)現(xiàn)一個(gè)平滑的hover效果。2010-05-05bootstrap+jquery項(xiàng)目引入文件報(bào)錯(cuò)的解決方法
這篇文章主要介紹了bootstrap+jquery項(xiàng)目引入文件的常見報(bào)錯(cuò)問題,下面小編給大家?guī)砹艘恍╁e(cuò)誤及錯(cuò)誤的解決方法,需要的朋友可以參考下2018-01-01