jquery 网页链接的缩略图怎么生成

jqthumb是一款实用的响应式按比例生成图片缩略图的jQuery插件。

成都创新互联公司是一家专注于成都网站建设、网站制作与策划设计,宝塔网站建设哪家好?成都创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:宝塔等地区。宝塔做网站价格咨询:18980820575

jqthumb可以按照用户设定的比例、尺寸、位置等属性来生成新的缩略图，在老的浏览器中它还能够替代background-size属性。

jqthumb兼容性超强，可以工作在所有现代浏览器甚至是IE6+上，jQuery

1.3以上版本即可运行。它还可以在Zepto（通过zepto-data插件）v1.1.3+上运行。

这个jquery插件可以帮助我们按比例生成图片缩略图。大家可能知道在处理缩略图的时候使用 background-size: cover; 可以解决许多棘手问题。但是 background-size: cover; 在IE6、IE7和IE8下不能正常工作。而该插件正是弥补了这个缺陷。

使用方法

使用以下的简单html结构：

div style="width: 100%; height: 400px;"

img src="path/picture.jpg" class="example1" /

/div

div style="width: 400px; height: 400px;"

img src="path/picture.jpg" class="example2" /

/div

button id="kill"Kill/button

button id="kill-all"Kill All/button

在页面中引入jQuery和jqthumb.min.js文件：

script type="text/javascript" src="scripts/jquery.min.js"/script

script type="text/javascript" src="scripts/jqthumb.min.js"/script

然后按下面方法调用插件：

script type="text/javascript"

$(function(){

// plugin initialization

$('img').jqthumb({

classname : 'jqthumb', // class name. DEFUALT IS jqthumb

width : '100%', // new image width after cropping. DEFAULT IS 100px.

height : '100%', // new image height after cropping. DEFAULT IS 100px.

position : {

x : '50%', // x position of the image. DEFAULT is 50%. 50% also means centerize the image.

y : '50%' // y position of the image. DEFAULT is 50%. 50% also means centerize the image.

},

source : 'src', // to specify the image source attribute. DEFAULT IS src.

show : false, // TRUE = show immediately after processing. FALSE = do not show it. DEFAULT IS TRUE.

responsive : 20, // used by older browsers only. 0 to disable. DEFAULT IS 20

zoom : 1, // zoom the output, 2 would double of the actual image size. DEFAULT IS 1

method : 'auto', // 3 methods available: "auto", "modern" and "native". DEFAULT IS auto

before : function(oriImage){ // callback before each image starts processing.

alert("I'm about to start processing now...");

},

after : function(imgObj){ // callback when each image is cropped.

console.log(imgObj);

},

done : function(imgArray){ // callback when all images are cropped.

for(i in imgArray){

$(imgArray[i]).fadeIn();

}

}

});

// kill command

$('#kill').click(function(){

$('.example1').jqthumb('kill');

});

// kill all command

$('#kill').click(function(){

$.jqthumb('killall');

});

});

/script

BOWER

bower install jqthumb

可用参数

source：图片的URL属性。例如：img src="path/image.jpg" /的source是 src。

$('img').jqthumb({

source : 'attr-src' // DEFAULT: src

});

classname：生成的缩略图的class名称。当你想使用外部css来渲染缩略图时该参数十分有用。

$('img').jqthumb({

width : 200, // DEFAULT: 100

height : '100%' // DEFAULT: 100

});

position：通过 X 和 Y作为关键参数来定义一个对象。y用于跳转缩略图上下位置，x用于跳转缩略图的左右位置。注意： position.x 和 position.y必须在定义的width和height的范围里面。如果你用百分比来定义position.x 和 position.y，请确保它们在0-100%之间。

$('img').jqthumb({

position: {

x : 20, // DEFAULT: '50%'

y : '30%' // DEFAULT: '50%'

}

});

show：是否在处理完成后显示缩略图：

$('img').jqthumb({

show : false // DEFAULT: true

});

responsive：该参数只是在浏览器不支持 CSS3 的时候才使用。为了在旧的浏览器上完成响应式效果，该插件在$(window).resize()事件被触发的时候会重新计算。设置为0则在旧的浏览器中不使用响应式效果。在现代浏览器中不支持禁用响应式特性，可以使用method :"native"来禁止它。

/* responsive only works for native method / older browsers */

$('img').jqthumb({

responsive : 10 // DEFAULT: 20

});

/* to disable responsive feature in modern method / browsers, switch method to native */

$('img').jqthumb({

method : 'native', // DEFAULT: auto

responsive : 0 // DEFAULT: 20

});

zoom：放大或缩小缩略图：

$('img').jqthumb({

zoom : 3 // DEFAULT: 1

});

method：该按比例是否缩略图插件提供两种方法：一种使在浏览器支持 CSS3 的时候使用，一种是浏览器不支持CSS3的时候使用。有时候你可能需要切换这两种方法来做些测试。默认情况下，该插件会自动检测浏览器是否支持CSS3然后调用相应的方法。

$('img').jqthumb({

method : 'native' // Availability: "auto", "modern", "native". DEFAULT: auto

});

before：这是在计算开始前的一个回调函数。该函数以参数的形式返回原始图片的source和对象。如果你在初始化的时候使用了多个对象class名称，那么这个函数会被调用两次。

$('img').jqthumb({

before : function(originalImage){

console.log(originalImage);

}

});

after：这是在计算结束后的一个回调函数。该函数以参数的形式返回新生成的缩略图对象。如果你在初始化的时候使用了多个对象class名称，那么这个函数会被调用两次。

$('img').jqthumb({

after : function(newThumb){

$(newThumb).fadeIn();

}

});

done：这是在所有图片对象都被处理完毕后的一个回调函数。它返回所有缩略图的数组对象。

$('img').jqthumb({

done : function(thumbnails){

for(i in thumbnails)

$(thumbnails[i]).fadeIn();

}

});

可用命令

$('img').jqthumb('kill'); // destroy the plugin

$.jqthumb('killall'); // destroy all generated thumbnails on the page

更多的使用方法

...

img src="path/image.jpg" /

...

script type="text/javascript"

$(function(){

$('img').jqthumb({

width : 300,

height : 200

});

});

/script

...

div data-jqthumb-src="path/image.jpg"/div

...

script type="text/javascript"

$(function(){

$('div').jqthumb({

source : 'data-jqthumb-src'

});

});

/script

...

div style="width: 100%; height:500px;"

img src="path/image.png" /

/div

...

script type="text/javascript"

$(function(){

$('div').jqthumb({

width : '100%',

height : '100%'

});

});

/script

...

img class="my-img" data-jqthumb-src="path/image1.png" data-jqthumb-width="200" data-jqthumb-height="200" /

img class="my-img" data-jqthumb-src="path/image2.png" data-jqthumb-width="200" data-jqthumb-height="180" /

img class="my-img" data-jqthumb-src="path/image3.png" data-jqthumb-width="200" data-jqthumb-height="160" /

img class="my-img" data-jqthumb-src="path/image4.png" data-jqthumb-width="200" data-jqthumb-height="140" /

img class="my-img" data-jqthumb-src="path/image5.png" data-jqthumb-width="200" data-jqthumb-height="120" /

...

script type="text/javascript"

$(function(){

$('.my-img').each(function(){

var $img = $(this);

$img.jqthumb({

source : $img.attr('data-jqthumb-src'),

width : $img.attr('data-jqthumb-width'),

height : $img.attr('data-jqthumb-height')

});

});

});

/script

...

img class="my-img" src="path/image.jpg" /

...

script type="text/javascript"

$(function(){

$('.my-img').jqthumb({

width : 300,

height : 300,

show : false, // By default the image would be shown immediately after processing. To disable, set it to false

after : function(croppedImg){ // This callback returns an object

$(croppedImg).fadeIn(); // This would fade in the cropped image

}

});

});

/script

...

img class="my-img" src="path/image1.jpg" /

img class="my-img" src="path/image2.jpg" /

img class="my-img" src="path/image3.jpg" /

...

script type="text/javascript"

$(function(){

$('.my-img').jqthumb({

width : 300,

height : 300,

show : false, // By default the image would be shown immediately after processing. To disable, set it to false

done : function(allCroppedImgs){ // This callback returns an array

for(i in allCroppedImgs){

$(allCroppedImgs[i]).fadeIn(); // This would fade in the cropped images one by one

}

}

});

});

/script

带缩略图多屏轮播的jQuery左右滚动banner焦点图代码，到了第十一张小图片就不自动滚下去了？

肯定的 你要那种连续滚动的 要在小图前后各家一张图片才可以 最前面加最后一张最后面加最前面 然后判断

JQuery实现input上传图片显示缩略图

最近做一套手机商城页面，在退款申请页面有上传图片显示缩略图的功能，以前没有做过这个，所以整理了一下。

在这里我把上传按钮input变成了透明色，然后用一个设置了+号背景图的span盖在上面实现了上传按钮的样式改变，如不用图片也可以自行设置span样式来达到想要的效果。

给 input 绑定了一个 change() 事件，当事件被触发后，首先会检测该浏览器是否支持 HTML5 FileReader API ,如果支持就会执行一个 each 循环。

在每一个循环里，用正则表达式判断文件后缀名是否为图片格式，如果是图片格式，如果是图片，就会用 readAsDataURL 方法来读取其 BASE64编码，然后以其为img元素的 src 属性值，添加 img 元素到 #imgPreview 中，实现上传显示缩略图。

当前文章：缩略图jquery,缩略图英文
标题链接：http://myzitong.com/article/phjejc.html