資源描述：
《bootstrap輪播插件中圖片變形的終極解決方案使用jqthumbjs》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫。
1、Bootstrap輪播插件中圖片變形的終極解決方案使用jqthumb.js這篇文章主要介紹了Bootstrap輪播插件中圖片變形的終極解決方案，使用jqthumb.js,感興趣的小伙伴們可以參考一下在頂求網(wǎng)的首頁中我使用了Bootstrap的輪播（carousel）插件來展示文章中的圖片。我在程序中自動抓取文章的第一張圖片作為該輪播控件中要顯示的圖片，由于文章的圖片大小不一，而輪播插件的大小基本是固定的，所以展示的時候圖片出現(xiàn)了變形。在網(wǎng)上找了很多中方式也沒有解決（過程曲折，不再贅述），直到找到了這款Jquer
2、y的縮放插件jqthumb,js.下面來看看如何使用它以及如何利用它來控制輪播控件中圖片的大小，而且能夠做到不變形，可以顯示圖片的主要部分（類似于微信朋友圈的圖片混排效果不知道大家有沒有注意，在微信朋友圈中無論你發(fā)的圖片的比率是什么，總能夠被完美的排列，而不會發(fā)生變形）。首先我們看看Bootstrap的Carousel的html代碼：nbsp;//It;divid=carousel一example-genericclasscarouselslide"data-ride=/zcarousel"gt;It;!-一W
3、rapperforslides--gt;nbsp;It:divclass=〃carousel-inner〃role=〃listboxz/gt:nbsp;nbsp;It:divclass=〃itemactive〃gt;nbsp:nbsp;It;ahref=〃包含圖片一文章路徑〃gt;nbsp;nbsp;nbsp;It;imgsrc=〃圖片一'路徑〃alt=〃圖片一’’onload=//DrawImage(this)Vgt;It;/agt;nbsp;nbsp;nbsp:It:divelass=〃carousel-c
4、aptiongt;nbsp;nbsp;nbsp;nbsp;It;h4class=〃alpha/zgt;nbsp;nbsp;nbsp;nbsp;nbsp;It:astyle=〃color:white;〃href="包含圖片一文章路徑"gt;圖片一標(biāo)題It;/agt;nbsp;nbsp;nbsp;nbsp;It;/h4gt;nbsp;nbsp;nbsp;nbsp;It;/divgt;nbsp;nbsp;It;/divgt;nbsp;nbsp;It;divclass=〃item〃gt;nbsp;nbsp;It;ahr
5、ef=〃包含圖片二文章路徑〃gt;nbsp;nbsp;nbsp;It;imgsrc=〃圖片二路徑〃alt=〃圖片二"onload=〃DrawImage(this)〃/gt;nbsp;nbsp;1t;/agt;nbsp;nbsp;It;divclass=〃carouse卜caption〃gt;nbsp;nbsp;nbsp;nbsp;It;h4class=〃alpha〃gt;nbsp;nbsp;nbsp;nbsp;nbsp;It;astyle="color:white;〃href=〃包含圖片二文章路徑〃gt;圖片二
6、標(biāo)題lt;/agt;nbsp:nbsp;nbsp;nbsp;It;/h4gt;nbsp;nbsp;nbsp;nbsp;It;/divgt;nbsp;nbsp;lt:/divgt;nbsp;nbsp;It;divclass=//itenTgt;nbsp;nbsp;nbsp;It;ahref=〃包含圖片三文章路徑〃gt;nbsp;nbsp;nbsp;nbsp;It;imgsrc=〃圖片三路徑〃alt="圖片三"onload="DrawImage(this)7gt;nbsp;nbsp;nbsp;It:/agt;nbs
7、p;nbsp;nbsp:It:divclass=/zcarousel-captiorTgt;nbsp;nbsp;nbsp;nbsp;It;h4class=〃alpha"gt;nbsp;nbsp:nbsp:nbsp:nbsp:It:astyle=〃color:white;"href=〃包含圖片三文章路徑"gt;圖片三標(biāo)題It;/agt;nbsp;nbsp;nbsp:nbsp;It;/h4gt;nbsp;nbsp;nbsp;nbsp;It;/divgt;nbsp;nbsp;lt;/divgt;nbsp;It;/di
8、vgt;由上述代碼可以看到，每個圖片(img)在加載(onload)的時候都調(diào)用了一個函數(shù)Drawlmage，在這個函數(shù)中我們就可以調(diào)用jqthumb.js的方法來控制圖片的大小了，注意該函數(shù)一定要加在上述HTML代碼前，否則第一次加載的時候控制圖片大小會失敗(因?yàn)轫撁婕虞d時序的原因)，函數(shù)代碼如下：nbsp;It;!—導(dǎo)入插件一gt;It;scripttype=//text/java
