bootstrap轮播插件中图片变形的终极解决方案使用jqthumbjs

《bootstrap轮播插件中图片变形的终极解决方案使用jqthumbjs》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、Bootstrap轮播插件中图片变形的终极解决方案使用jqthumb.js这篇文章主要介绍了Bootstrap轮播插件中图片变形的终极解决方案，使用jqthumb.js,感兴趣的小伙伴们可以参考一下在顶求网的首页中我使用了Bootstrap的轮播（carousel）插件来展示文章中的图片。我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片，由于文章的图片大小不一，而轮播插件的大小基本是固定的，所以展示的时候图片出现了变形。在网上找了很多中方式也没有解决（过程曲折，不再赘述），直到找到了这款Jquer

2、y的缩放插件jqthumb,js.下面来看看如何使用它以及如何利用它来控制轮播控件中图片的大小，而且能够做到不变形，可以显示图片的主要部分（类似于微信朋友圈的图片混排效果不知道大家有没有注意，在微信朋友圈中无论你发的图片的比率是什么，总能够被完美的排列，而不会发生变形）。首先我们看看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;图片一标题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、标题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;图片三标题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)的时候都调用了一个函数Drawlmage，在这个函数中我们就可以调用jqthumb.js的方法来控制图片的大小了，注意该函数一定要加在上述HTML代码前，否则第一次加载的时候控制图片大小会失败(因为页面加载时序的原因)，函数代码如下：nbsp;It;!—导入插件一gt;It;scripttype=//text/java