您当前的位置:首页 > 开平科技 > 站长

轮播焦点幻灯片图片变形的终极解决方案——使用jqthumb.js

时间:2017-02-12 15:21:50  来源:  作者:

由于文章的图片大小不一,而轮播插件的大小基本是固定的,所以展示的时候图片出现了变形。在网上找了很多中方式也没有解决(过程曲折,不再赘述),直到找到了这款Jquery的缩放插件——jqthumb.js.下面来看看如何使用它以及如何利用它来控制轮播控件中图片的大小,而且能够做到不变形,可以显示图片的主要部分(类似于微信朋友圈的图片混排效果——不知道大家有没有注意,在微信朋友圈中无论你发的图片的比率是什么,总能够被完美的排列,而不会发生变形)。

 

1、引入文件

<script src="js/jqthumb.min.js"></script>

2、JavaScript

$(function(){
    $('img').jqthumb();});

我们来看这款jQuery图片缩放插件jQThumb插件的使用嵌套方法:

01    <link type="text/css" rel="stylesheet" href="style/style.css" />    
02    <script src="js/jquery-1.8.3.min.js"></script>    
03    <script src="js/jqthumb.min.js"></script>    
04    <script>    
05    $(function(){    
06        $('.dowebok2 img').jqthumb({    
07            width: 200,    
08            height: 200,    
09            after: function(imgObj){    
10                imgObj.css('opacity', 0).animate({opacity: 1}, 2000);    
11            }    
12        });    
13    });    
14    </script>
       
把上面的代码添加到模板页面的<head></head>之间,里面的CSS只是一个演示的容器类,大家可以修改称自己的样式,但是调用的JS文件库和函数代码必须做对应的修改,
1    $('.dowebok2 img').jqthumb({    
里面的CLASS类名称要注意的,然后是核心的代码,很简单的,我们不全部说明了,

1    <li class="dowebok2"><img src="images/1.jpg" alt="美女1"></li>   
 
里面的容器类也就是CLASS类样式是一致的,这样就把jQThumb插件的效果调用了出来,好了,如果你有更好的代码,请分享给我们,用来帮助更多的站长朋友。


五、参数


属性/方法类型默认值说明
classname
‘jqthumb’缩略图容器的 class
width整数100缩略图的宽度,单位为 px
height整数100缩略图的高度,单位为 px
position
{top:’50%’, left:’50%’}缩略图的位置,默认为 50%,即水平并且垂直居中
source字符串‘src’指定图像源属性,默认为 src
showoncomplete布尔值true处理后时候立即显示,如果为 false 则不自动显示,需要额外设置让它显示,比如使用回调函数 after、done
before函数
处理前的回调函数
after函数
某一个图片处理后的回调函数
done函数
所有图片处理后的回调函数


微信公众号搜索“ 开平人网 ”加关注,每天推送最新的开平资讯!欢迎关注!【微信扫描下图可直接关注

开平人网微信公众号

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
相关文章
    无相关信息
栏目更新
栏目热门