Bootstrap輪播插件中圖片變形的終極解決方案 使用jqthumb.js
在頂求網(wǎng)的首頁中我使用了BootStrap的輪播（carousel）插件來展示文章中的圖片。我在程序中自動抓取文章的第一張圖片作為該輪播控件中要顯示的圖片，由于文章的圖片大小不一，而輪播插件的大小基本是固定的，所以展示的時候圖片出現(xiàn)了變形。在網(wǎng)上找了很多中方式也沒有解決(過程曲折，不再贅述)，直到找到了這款Jquery的縮放插件——jqthumb.js.下面來看看如何使用它以及如何利用它來控制輪播控件中圖片的大小，而且能夠做到不變形，可以顯示圖片的主要部分（類似于微信朋友圈的圖片混排效果——不知道大家有沒有注意，在微信朋友圈中無論你發(fā)的圖片的比率是什么，總能夠被完美的排列，而不會發(fā)生變形）。首先我們看看Bootstrap的Carousel的html代碼：
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="包含圖片一文章路徑">
<img src="圖片一路徑" alt="圖片一" onload="DrawImage(this)"/></a>
<div class="carousel-caption">
<h4 class="alpha">
<a style="color:white;" href="包含圖片一文章路徑">圖片一標題</a>
</h4>
</div>
</div>
<div class="item">
<a href="包含圖片二文章路徑">
<img src="圖片二路徑" alt="圖片二" onload="DrawImage(this)"/>
</a>
<div class="carousel-caption">
<h4 class="alpha">
<a style="color:white;" href="包含圖片二文章路徑">圖片二標題</a>
</h4>
</div>
</div>
<div class="item">
<a href="包含圖片三文章路徑">
<img src="圖片三路徑" alt="圖片三" onload="DrawImage(this)"/>
</a>
<div class="carousel-caption">
<h4 class="alpha">
<a style="color:white;" href="包含圖片三文章路徑">圖片三標題</a>
</h4>
</div>
</div>
</div>
由上述代碼可以看到，每個圖片（img）在加載（onload）的時候都調用了一個函數(shù)DrawImage,在這個函數(shù)中我們就可以調用jqthumb.js的方法來控制圖片的大小了，注意該函數(shù)一定要加在上述HTML代碼前，否則第一次加載的時候控制圖片大小會失?。ㄒ驗轫撁婕虞d時序的原因），函數(shù)代碼如下：
<!--導入插件-->
<script type="text/javascript" src="/static/plugins/thumb/js/jqthumb.js"></script>
<script>
function DrawImage(hotimg)
{
$(hotimg).jqthumb({
classname : 'jqthumb',
width : '100%',
height : '300px',
position : { y: '50%', x: '50%'},
zoom : '1',
method : 'auto',
});
}
</script>
在該函數(shù)中我們調用了jqthumb方法來定義一個寬度和輪播插件相同高度為300px的原圖片的縮略圖，該縮略圖是由圖片的中心開始生成的（注意其position屬性的設置），這樣即使圖片的大小變化了，也可以顯示圖片的主要內容，而且圖片比率可以保持不變。
來源：頂求網(wǎng)
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是所有內容，希望能對大家有所幫助，也希望大家多多支持腳本之家。
相關文章
匯編語言還是在大學的時候學的，匯編語言有個特點是語句短、條數(shù)多，很難可以把全部指令都背熟。本文就來用JavaScript編寫一個8086匯編指令查詢工具，希望對大家有所幫助2023-02-02
ES6中Proxy與Reflect實現(xiàn)重載(overload)的方法
這篇文章主要介紹了ES6中Proxy與Reflect實現(xiàn)重載(overload)的方法,分析了重載的原理及使用Proxy和Reflect來實現(xiàn)重載的操作步驟與相關技巧,需要的朋友可以參考下2017-03-03
JavaScript設置彈出式獨立窗口頁面和window的方法舉例詳解
window.open是網(wǎng)頁中經(jīng)常遇到的彈出窗口代碼,不是網(wǎng)絡中比較反感的那類彈出代碼,下面這篇文章主要給大家介紹了關于JavaScript設置彈出式獨立窗口頁面和window的方法,需要的朋友可以參考下2024-01-01
偶爾聽人說javascript閉包，讓我聯(lián)想起以前學編譯原理和數(shù)字邏輯里講的閉包，以前上課講的閉包很難懂，而且含有遞歸的意思在里面，現(xiàn)在不想再查看里面的閉包概念。2010-06-06
這篇文章主要介紹了淺談Webpack 持久化緩存實踐,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了JavaScript實現(xiàn)橫向滑出的多級菜單效果,涉及JavaScript數(shù)學運算及頁面元素樣式動態(tài)變換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了javascript 網(wǎng)頁進度條簡單實例的相關資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了javascript隨機之洗牌算法深入分析,同時提供了一個完整實例,需要的朋友可以參考下2014-06-06
BootStrap daterangepicker 雙日歷控件
這篇文章主要介紹了BootStrap daterangepicker 雙日歷控件,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-06-06
CommonJS與ES6?Module的使用區(qū)別分析
這篇文章主要為大家介紹了CommonJS與ES6?Module的使用區(qū)別分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04