Js獲取圖片原始寬高的實(shí)現(xiàn)代碼

更新時(shí)間：2016年05月17日 16:00:29 投稿：jingxian

下面小編就為大家?guī)硪黄狫s獲取圖片原始寬高的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧

如果我們頁面看到的圖片都是縮略圖，那就需要做個(gè)圖片點(diǎn)擊放大效果，那么怎樣獲取圖片的原始寬高呢？方法如下：

//獲取圖片原始寬度
function getNaturalWidthAndHeight(img) {
var image = new Image();
image.src = img.src;
return [image.width,image.height];
}

//點(diǎn)擊縮略圖彈出層，顯示原始圖片。

//獲取class為tz_main_box下的所有p標(biāo)簽下的圖片img
$(".tz_main_box p>img").each(function (k, v) {
$(this).unbind("click"); //解除綁定，防止彈出多次圖片層。
$(this).click(function () {
var img = v; //圖片對(duì)象
var imgArea = getNaturalWidthAndHeight(img);
var layerWidth = imgArea[0]+ 5;
if (layerWidth > 1080) {
layerWidth = 1080; 
}
var layerHeight = imgArea[1] + 5;
if (layerHeight > 600) {
layerHeight = 600;
}

//layer彈出層插件
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: [''+layerWidth+'px', '' + layerHeight + 'px'],
skin: 'layui-layer-nobg', //沒有背景色
shadeClose: true,
closeBtn: 1, //顯示關(guān)閉按鈕
content: "<center><img src='" + $(this).attr("src") + "'></center>"
});
});
});

以上這篇Js獲取圖片原始寬高的實(shí)現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript中的函數(shù)模式詳解
這篇文章主要介紹了JavaScript中的函數(shù)模式詳解,本文講解了創(chuàng)建函數(shù)的語法、函數(shù)表達(dá)式、命名函數(shù)表達(dá)式、函數(shù)的聲明、函數(shù)聲明與表達(dá)式、函數(shù)的提升、即時(shí)函數(shù)模式等內(nèi)容,需要的朋友可以參考下
2015-02-02
javascript格式化指定日期對(duì)象的方法
這篇文章主要介紹了javascript格式化指定日期對(duì)象的方法,涉及javascript針對(duì)日期對(duì)象操作的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
Swiper自定義分頁器使用詳解
這篇文章主要為大家詳細(xì)介紹了Swiper自定義分頁器的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-12-12
通俗易懂講解Json Web Token (JWT)
這篇文章主要介紹了通俗易懂講解Json Web Token (JWT)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
一個(gè)JavaScript防止表單重復(fù)提交的實(shí)例
防止重復(fù)表單提交的方法有很多，本文使用JavaScript來實(shí)現(xiàn)防止表單重復(fù)提交，很簡單，但很實(shí)用，新手朋友們不要錯(cuò)過
2014-10-10
理解JavaScript變量作用域更輕松
變量作用域是每門編程語言都會(huì)涉及的話題，也是作為一名程序員必需掌握的知識(shí)點(diǎn)，能深入掌握變量作用域更有助于你編寫穩(wěn)定的程序。
2009-10-10
人人網(wǎng)javascript面試題可以提前實(shí)現(xiàn)下
JavaScript面試題要求：以下題目必須從一至四題中，選出三道題，使用原生代碼實(shí)現(xiàn)，不可使用任何框架，第五題為選作題
2012-01-01
使用mini-define實(shí)現(xiàn)前端代碼的模塊化管理
這篇文章主要介紹了使用mini-define實(shí)現(xiàn)前端代碼的模塊化管理，十分不錯(cuò)的一篇文章，這里推薦給有需要的小伙伴。
2014-12-12
網(wǎng)頁加載時(shí)頁面顯示進(jìn)度條加載完成之后顯示網(wǎng)頁內(nèi)容
網(wǎng)頁加載時(shí)頁面顯示進(jìn)度條（加載完成時(shí)顯示網(wǎng)頁內(nèi)容）,這種效果在瀏覽網(wǎng)頁很常見，本文也介紹一種實(shí)現(xiàn)方法，需要了解的朋友可以參考下
2012-12-12
layui多圖上傳實(shí)現(xiàn)刪除功能的例子
今天小編就為大家分享一篇layui多圖上傳實(shí)現(xiàn)刪除功能的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09