縮略圖jquery,縮略圖英文

jquery 網(wǎng)頁(yè)鏈接的縮略圖怎么生成

jqthumb是一款實(shí)用的響應(yīng)式按比例生成圖片縮略圖的jQuery插件。

成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站建設(shè)、網(wǎng)站制作與策劃設(shè)計(jì),寶塔網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:寶塔等地區(qū)。寶塔做網(wǎng)站價(jià)格咨詢:18980820575

jqthumb可以按照用戶設(shè)定的比例、尺寸、位置等屬性來(lái)生成新的縮略圖，在老的瀏覽器中它還能夠替代background-size屬性。

jqthumb兼容性超強(qiáng)，可以工作在所有現(xiàn)代瀏覽器甚至是IE6+上，jQuery

1.3以上版本即可運(yùn)行。它還可以在Zepto（通過(guò)zepto-data插件）v1.1.3+上運(yùn)行。

這個(gè)jquery插件可以幫助我們按比例生成圖片縮略圖。大家可能知道在處理縮略圖的時(shí)候使用 background-size: cover; 可以解決許多棘手問(wèn)題。但是 background-size: cover; 在IE6、IE7和IE8下不能正常工作。而該插件正是彌補(bǔ)了這個(gè)缺陷。

使用方法

使用以下的簡(jiǎn)單html結(jié)構(gòu)：

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

在頁(yè)面中引入jQuery和jqthumb.min.js文件：

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

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

然后按下面方法調(diào)用插件：

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

可用參數(shù)

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

$('img').jqthumb({

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

});

classname：生成的縮略圖的class名稱。當(dāng)你想使用外部css來(lái)渲染縮略圖時(shí)該參數(shù)十分有用。

$('img').jqthumb({

width : 200, // DEFAULT: 100

height : '100%' // DEFAULT: 100

});

position：通過(guò) X 和 Y作為關(guān)鍵參數(shù)來(lái)定義一個(gè)對(duì)象。y用于跳轉(zhuǎn)縮略圖上下位置，x用于跳轉(zhuǎn)縮略圖的左右位置。注意： position.x 和 position.y必須在定義的width和height的范圍里面。如果你用百分比來(lái)定義position.x 和 position.y，請(qǐng)確保它們?cè)?-100%之間。

$('img').jqthumb({

position: {

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

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

}

});

show：是否在處理完成后顯示縮略圖：

$('img').jqthumb({

show : false // DEFAULT: true

});

responsive：該參數(shù)只是在瀏覽器不支持 CSS3 的時(shí)候才使用。為了在舊的瀏覽器上完成響應(yīng)式效果，該插件在$(window).resize()事件被觸發(fā)的時(shí)候會(huì)重新計(jì)算。設(shè)置為0則在舊的瀏覽器中不使用響應(yīng)式效果。在現(xiàn)代瀏覽器中不支持禁用響應(yīng)式特性，可以使用method :"native"來(lái)禁止它。

/* 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 的時(shí)候使用，一種是瀏覽器不支持CSS3的時(shí)候使用。有時(shí)候你可能需要切換這兩種方法來(lái)做些測(cè)試。默認(rèn)情況下，該插件會(huì)自動(dòng)檢測(cè)瀏覽器是否支持CSS3然后調(diào)用相應(yīng)的方法。

$('img').jqthumb({

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

});

before：這是在計(jì)算開(kāi)始前的一個(gè)回調(diào)函數(shù)。該函數(shù)以參數(shù)的形式返回原始圖片的source和對(duì)象。如果你在初始化的時(shí)候使用了多個(gè)對(duì)象class名稱，那么這個(gè)函數(shù)會(huì)被調(diào)用兩次。

$('img').jqthumb({

before : function(originalImage){

console.log(originalImage);

}

});

after：這是在計(jì)算結(jié)束后的一個(gè)回調(diào)函數(shù)。該函數(shù)以參數(shù)的形式返回新生成的縮略圖對(duì)象。如果你在初始化的時(shí)候使用了多個(gè)對(duì)象class名稱，那么這個(gè)函數(shù)會(huì)被調(diào)用兩次。

$('img').jqthumb({

after : function(newThumb){

$(newThumb).fadeIn();

}

});

done：這是在所有圖片對(duì)象都被處理完畢后的一個(gè)回調(diào)函數(shù)。它返回所有縮略圖的數(shù)組對(duì)象。

$('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左右滾動(dòng)banner焦點(diǎn)圖代碼，到了第十一張小圖片就不自動(dòng)滾下去了？

肯定的 你要那種連續(xù)滾動(dòng)的 要在小圖前后各家一張圖片才可以 最前面加最后一張最后面加最前面 然后判斷

JQuery實(shí)現(xiàn)input上傳圖片顯示縮略圖

最近做一套手機(jī)商城頁(yè)面，在退款申請(qǐng)頁(yè)面有上傳圖片顯示縮略圖的功能，以前沒(méi)有做過(guò)這個(gè)，所以整理了一下。

在這里我把上傳按鈕input變成了透明色，然后用一個(gè)設(shè)置了+號(hào)背景圖的span蓋在上面實(shí)現(xiàn)了上傳按鈕的樣式改變，如不用圖片也可以自行設(shè)置span樣式來(lái)達(dá)到想要的效果。

給 input 綁定了一個(gè) change() 事件，當(dāng)事件被觸發(fā)后，首先會(huì)檢測(cè)該瀏覽器是否支持 HTML5 FileReader API ,如果支持就會(huì)執(zhí)行一個(gè) each 循環(huán)。

在每一個(gè)循環(huán)里，用正則表達(dá)式判斷文件后綴名是否為圖片格式，如果是圖片格式，如果是圖片，就會(huì)用 readAsDataURL 方法來(lái)讀取其 BASE64編碼，然后以其為img元素的 src 屬性值，添加 img 元素到 #imgPreview 中，實(shí)現(xiàn)上傳顯示縮略圖。

當(dāng)前題目：縮略圖jquery,縮略圖英文
URL鏈接：http://www.muchs.cn/article22/phjejc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、用戶體驗(yàn)、虛擬主機(jī)、域名注冊(cè)、ChatGPT、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)