Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js


Posted in Javascript onJuly 10, 2016

在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片。我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本是固定的,所以展示的时候图片出现了变形。在网上找了很多中方式也没有解决(过程曲折,不再赘述),直到找到了这款Jquery的缩放插件——jqthumb.js.下面来看看如何使用它以及如何利用它来控制轮播控件中图片的大小,而且能够做到不变形,可以显示图片的主要部分(类似于微信朋友圈的图片混排效果——不知道大家有没有注意,在微信朋友圈中无论你发的图片的比率是什么,总能够被完美的排列,而不会发生变形)。首先我们看看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)的时候都调用了一个函数DrawImage,在这个函数中我们就可以调用jqthumb.js的方法来控制图片的大小了,注意该函数一定要加在上述HTML代码前,否则第一次加载的时候控制图片大小会失败(因为页面加载时序的原因),函数代码如下: 

<!--导入插件-->
<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>

在该函数中我们调用了jqthumb方法来定义一个宽度和轮播插件相同高度为300px的原图片的缩略图,该缩略图是由图片的中心开始生成的(注意其position属性的设置),这样即使图片的大小变化了,也可以显示图片的主要内容,而且图片比率可以保持不变。 

来源:顶求网

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是所有内容,希望能对大家有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的direction图片渐变动画效果
May 24 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 #Javascript
jQuery回到顶部的代码
Jul 09 #Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 #Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 #Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 #Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 #Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 #Javascript
You might like
自己前几天写的无限分类类
2007/02/14 PHP
php zend 相对路径问题
2009/01/12 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Python列表解析配合if else的方法
2018/06/23 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Django中使用Celery的方法示例
2018/11/29 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
Python中如何引入第三方模块
2020/05/27 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
房屋改造计划书
2014/01/10 职场文书
工地安全质量标语
2014/06/07 职场文书
经典导游欢迎词
2015/01/26 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python